不是一般地好用的jquery表单验证插件-Validform

之前博主推荐过jQuery Validate，因为之前也在用，但是配置稍微显得有些麻烦，直到最近的这个项目用到了validform，才让我大开眼界，整个界面突然感觉太友好了，先来几张效果图吧。

整个过程引用的css及js非常少。

css如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

/*==========以下部分是Validform必须的===========*/      /*==========可以根据自己喜好适当修改（所用图标会在后面提供）===========*/    .Validform_checktip{      margin-left : 8px ;      line-height : 20px ;      height : 20px ;      overflow : hidden ;      color : #999 ;      font-size : 12px ;    }    .Validform_right{      color : #71b83d ;      padding-left : 20px ;      background : url (/Public/home/images/ right .png)  no-repeat  left  center ;    }    .Validform_wrong{      color : red ;      padding-left : 20px ;      white-space : nowrap ;      background : url (/Public/home/images/error.png)  no-repeat  left  center ;    }    .Validform_loading{      padding-left : 20px ;      background : url (/Public/home/images/onLoad.gif)  no-repeat  left  center ;    }    .Validform_error{      background-color : #ffe7e7 ;    }    #Validform_msg{ color : #7d8289 ;  font :  12px / 1.5  tahoma ,  arial , \ 5 b 8 b\ 4 f 53 ,  sans-serif ;  width : 280px ; -webkit-box-shadow: 2px  2px  3px  #aaa ; -moz-box-shadow: 2px  2px  3px  #aaa ;  background : #fff ;  position : absolute ;  top : 0px ;  right : 50px ;  z-index : 99999 ;  display : none ;filter: progid:DXImageTransform.Microsoft.Shadow(Strength= 3 , Direction= 135 , Color= '#999999' );}    #Validform_msg .iframe{ position : absolute ;  left : 0px ;  top : -1px ;  z-index : -1 ;}    #Validform_msg .Validform_title{ line-height : 25px ;  height : 25px ;  text-align : left ;  font-weight : bold ;  padding : 0  8px ;  color : #fff ;  position : relative ;  background-color : #000 ;}    #Validform_msg a.Validform_close:link,#Validform_msg a.Validform_close:visited{ line-height : 22px ;  position : absolute ;  right : 8px ;  top : 0px ;  color : #fff ;  text-decoration : none ;}    #Validform_msg a.Validform_close:hover{ color : #cc0 ;}    #Validform_msg .Validform_info{ padding : 8px ; border : 1px  solid  #000 ;  border-top : none ;  text-align : left ;}

js引用也不多，固定不变就行。

1 2 3 4 5 6 7 8 9

<script type= "text/javascript"  src= "/Public/home/js/Validform_v5.3.2_min.js" ></script> <script type= "text/javascript" > $( function (){      $( "#signupform" ).Validform({ //给form表单取个id吧      tiptype:3, //1,2,3呈现不同效果，可以自行尝试，当然3是最好      showAllError: true //全部显示错误提示，默认就行    }); }) </script>

接下来就是部分表单示例代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

< table  width = "80%" >              < tr >                < td  width = "100" >用户名</ td >                < td  width = "*" >< input  type = "text"  name = "username"  id = "username"  datatype = "s2-12"  nullmsg = "请输入用户名！"  errormsg = "昵称至少2个字符,最多12个字符！"  ajaxurl="<?php echo U('user/checkName') ?>" placeholder="2-12个字符"/></ td >                              </ tr >              < tr >                < td  width = "100" >设置密码</ td >                < td >< input  type = "password"  name = "password"  id = "password"  datatype = "*6-16"  nullmsg = "请设置密码！"  errormsg = "密码范围在6~16位之间！"  placeholder = "6-16个字符" /></ td >              </ tr >                  < tr >                < td  width = "100" >确认密码</ td >                < td >< input  type = "password"  name = "repassword"  id = "repassword"  datatype = "*6-16"   recheck = "password"  nullmsg = "请设置确认密码！"  errormsg = "请与上面密码保持一致！"  placeholder = "6-16个字符" /></ td >              </ tr >

datatype插件js中有说明（详细直接看js源码）

1	{ "*" : "不能为空！" , "*6-16" : "请填写6到16位任意字符！" , "n" : "请填写数字！" , "n6-16" : "请填写6到16位数字！" , "s" : "不能输入特殊字符！" , "s6-18" : "请填写6到18位字符！" , "p" : "请填写邮政编码！" , "m" : "请填写手机号码！" , "e" : "邮箱地址格式不对！" , "url" : "请填写网址！" }

需要关注的是ajaxurl这是异步验证，以前自己写表单验证的复杂步骤就省掉了，比如用户名、邮箱是否重复，原始密码是否相等，recheck是判断两次输入密码是否一致，其他就没什么了，如有需要博主可尽绵薄之力。

关于ajaxurl补充一点,可以传递参数，以thinkphp框架为例 ajaxurl="<?php echo U('User/checkName',array('type1' =>1,'type2' =>2))?>"，请务必打开firebug或者network查看参数的传递情况，这种传参方式必须要用get来接收（I('get.type1'),I('get.type2')）。

三张小图片博主就偷个懒了，直接放到右边了，请君带走，注意重命名哦！