前端表单验证插件

EasyValidator实现的功能：
 
1.提示功能（在表单或者其他标签中加入tip="想提示的文字"）
     如：


2. 普通表单验证（在表单中加入reg="正则表达式"）
    如： <input name="username" reg="正则" />
    <input name="name" tip="请输入你的名字哟~">


3. AJAX表单验证（在表单中加入url="验证系统地址"）
    如： <input name="username" url="地址" />


4. 普通表单验证 +  AJAX表单验证 （普通验证通过以后，再进行AJAX验证）
    如： <input name="username" reg="正则" url="地址" />


5. 扩展函数表单验证
  
比如自定义验证规则:
<input name="u" type="password" id="pwd2" reg="^\w{6,20}$" tip="6-20个字符，请确认两次密码输入相同"/> </td>
var isExtendsValidate = true; //如果要试用扩展表单验证的话，该属性一定要申明
function extendsValidate(){ //函数名称，固定写法
      //密码匹配验证
if( $('#pwd1').val() == $('#pwd2').val() ){//匹配成功
$('#pwd2').validate_callback(null,"sucess");//此次是官方提供的，用来消除以前错误的提示
}else{//匹配失败
$('#pwd2').validate_callback("密码不匹配","failed");//此处是官方提供的API，效果则是当匹配不成功，pwd2表单 显示红色标注，并且TIP显示为“密码不匹配”
return false;
}

//如果觉得官方提供的错误提示UI API 过于复杂，完全可以选择自定义，可以试试下面注释掉的代码

//if( $('#pwd1').val() != $('#pwd2').val() ){//匹配不成功
//alert("密码不匹配");
//return false;
//}

//checkbox 验证，必须选择一个checkbox
if($("[name='lover']:checked").length < 1){
alert("必须得有一个lover!");
return false;
}

}




validate


一. jquery.validate.js是jquery下的一个验证插件，功能比较强大
   Validation插件式历史悠久的jQuery插件之一,经过了全球各种项目的验证,得到了很多WEB开发者的好评,作为一个表单验证的解决方案,Validation有很多的优点,比如:
内置的验证规则，如：必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则
可以自定义验证规则：可以很方便地自定义验证规则
简单而且强大的验证信息提示：没人了验证信息提示，并提供自定义覆盖默认提示信息功能
实时进行验证的功能.：通过blur和keyup时间来触发验证规则




 二、默认校验规则
(1)required:true               必输字段
(2)remote:"check.php"          使用ajax方法调用check.php验证输入值
(3)email:true                  必须输入正确格式的电子邮件
(4)url:true                    必须输入正确格式的网址
(5)date:true                   必须输入正确格式的日期
(6)dateISO:true                必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true                 必须输入合法的数字(负数，小数)
(8)digits:true                 必须输入整数
(9)creditcard:                 必须输入合法的信用卡号
(10)equalTo:"#field"           输入值必须和#field相同
(11)accept:                    输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10               输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10]               输入值必须介于 5 和 10 之间
(16)max:5                      输入值不能大于5
(17)min:10                     输入值不能小于10


三使用:
   1.加载文件
    <script type="text/javascript" src="jquery1.10.2.js"></script>
    <script type="text/javascript" src="jquery.validate.min.js"></script>
   <script type="text/javascript" src="messages_zh.js"></script>




 2.构建表单
    <form   id="myform" >
        <input id="cusername" name="username" size="25" class="required" minlength="2" />
       <input id="cemail" name="email" size="25"  class="required email" />
      <input id="pwd" name="email" size="25"  class="required"  rangelength='5,10' />
       注意:  多个参数之间使用空格分隔。
                如果验证规则有参数:  
                     
  </form>


3.调用:
   <script type="text/javascript">
        $(document).ready(function() {
            $("你的form表单id").validate();
        });
    </script>




4.改变错误提示的样式:
     在css里面 
           label.error{
               margin-left: 10px;
                color: red;
        }
5. 指定错误显示容器:
        在validate()里面添加属性
         $("你的form表单id").validate({
                        errorElement : "span" //用来创建错误提示信息标签(可自定义)
                });
      注意:  如果有其他属性也可以添加到{} 里面，多个属性之间使用 , 分隔，最后一个不打 ， 




6.验证的另外一种方式： 实现html 与验证规则分离
       $("#signupForm").validate({
                  rules:{
                             在rules里面写验证规则，多个验证规则之间使用,分隔,最后一个规则不打, 
                           inputName: {  规则1,规则2   },
                            inputName: {  规则1,规则2   }
                    } ,
                      messages: {
                                你的提示信息
                              inputName: {  规则名 :  "提示信息"  ,规则名 :  "提示信息"  }
                       }
})


 7.其他常用属性
        Success : function(label){    //验证成功后执行的回调函数，label指向上面那个错误提 示信息标签em
                  label.text( ' ' )  //清空错误提示消息
                  . addClass("success")  //添加上自定义的success类
             }
              再在css中给em.error 和 em.success设置样式（如背景分别为错号和对号等）


    自定义验证规则
                $.validator . addMethod(
                               "你自己的方法名",     //自定义规则方法名
                                    function(value , element , param){   /自定义规则体
                                             return value == eval_r(param);
                                    },
                                  '请输入正确的数学公式计算后的结果'   //提示信息
                        )
                 调用自定义的验证规则
                         在 rules中加入valcode :( 自定义规则方法名 : "参数")
 比如:
                       $("#formId").validate({
                                rules : {  //增加rules属性
                                username: { required : true , minlength : 2} ,
                                email : { required : true , email : true} ,
                                url : "url" ,
                                  comment : "required" ,
                                valcode : (formula : "7+9")  //valcode为name的值
                               }
                         })