jquery结合CSS使用validate实现漂亮的验证

前端技术 2023/09/03 JavaScript

自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
<HTML xmlns=\"http://www.w3.org/1999/xhtml\"> 
<HEAD><TITLE>鼠标悬停 - 蘋果·志 - goldapple\'s blog</TITLE> 
<META http-equiv=Content-Type content=\"text/html; charset=utf-8\"> 
<STYLE type=text/css> 
BODY { 
  FONT-SIZE: 12px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif 
} 
 { 
  PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px 
} 
A { 
  DISPLAY: block; WIDTH: 164px; COLOR: #000000; HEIGHT: 36px; TEXT-DECORATION: none 
} 
UL { 
  MARGIN: 200px auto; WIDTH: 632px; LIST-STYLE-TYPE: none 
} 
LI { 
   FLOAT: left; MARGIN: 0px 20px; WIDTH: 164px; LINE-HEIGHT: 39px; POSITION: relative; HEIGHT: 36px; TEXT-ALIGN: center 
} 
LABEL { 
  DISPLAY: none; BACKGROUND: url(images/hover.gif) no-repeat 0px 0px; LEFT: -16px; WIDTH: 200px; LINE-HEIGHT: 68px; POSITION: absolute; TOP: -100px; HEIGHT: 76px 
} 
input.error{ 
border: 2px dashed red; 
} 
</STYLE> 
<SCRIPT src=\"images/jquery.min.js\" type=text/javascript></SCRIPT> 
<SCRIPT src=\"jquery.validate.js\" type=text/javascript></SCRIPT> 
<SCRIPT type=text/javascript> 
$(function(){ 
 $(\'#a input\').hover(function(){ 
  $(this).parent().find(\'label\').animate({opacity:\"show\",left:\"-85px\"},500);//.show(); 
  },function(){ 
  $(this).parent().find(\'label\').animate({opacity:\"hide\",left:\"-105px\"},500);//.hide(); 
  });  
  $(\"#signupForm\").validate({ 
    rules: { 
        password: { 
        required: true, 
        minlength: 5 
        }, 
        name:{ 
         required:true 
        } 
 }, 
    messages: { 
      password: { 
      required: \"请输入密码\", 
      minlength: jQuery.format(\"密码不能小于{0}个字符\") 
      }, 
      name:{ 
       required:\"测试\" 
      } 
 },success:function(){ 
  $(\"label.error\").remove(); 
 } 
  }); 
}) 
</SCRIPT> 
<META content=\"MSHTML 6.00.2900.5803\" name=GENERATOR></HEAD> 
<BODY> 
<form id=\"signupForm\"> 
<div id=\"a\"> 
<UL> 
 <LI><div><input type=\"text\" name=\"password\"></div> </LI> 
 <LI><input type=\"text\" name=\"name\"> </LI> 
</UL> 
</div> 
</form> 
</BODY></HTML>

是不是非常漂亮呢，下伙伴们也可以按照自己的要求美化美化，希望小伙伴们能够喜欢。

本文地址：https://www.stayed.cn/item/8802

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案