jquery-validata插件

详情

jquery-validata 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。

该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

下面统计一些常用的操作方式以及常用的方法和属性;

---

先引入jquery,在引入jquery-validata,在引入中文包;

$("form").validata({})  //开始验证form表单;参数是配置对象，一般写rules与messages这两个，rules是添加验证规则，messages是配置提示信息;

rules:{}  //这个配置对象，一般都是添加正则的验证规则，里面的常用效验规则下面会做个总结;（键值为form表单中的name值）;

messages:{}  //这个配置对象，用于配置正则的提示信息，出现什么不匹配正则，弹出相应的提示信息;键值与上面相对应;

默认校验规则

验证规则的键值位form中的name,不是id和class;

required:true  //必须输入的字段;在配置验证规则中添加了这个规则，表示必须输入，不输入则弹出messages中相应的文字;

remote:"check.php||{}"  //使用 ajax 方法调用 check.php 验证输入值。

开启远程验证,相当于发送了一个ajax 请求参数是个配置对象或者是个文件,配置对象里面包括(type,url,dataType,data)

data配置传递的参数,要传递的参数根据服务器的名字配置相对应的值进行判断 ;

（下面格式中不一定type就是相应的类型，可以是text,要是相应的格式，就可以不用配置规则，就可以直接使用）;

---------------------------

email:true  //必须输入正确的email格式;(类型是text也可以验证email);

url:true   //必须输入正确的url格式;

date:true   //必须输入正确的日期格式;  xxxx-xx-xx||xxxx/xx/xx  (ie6出错，慎用);

dateISO:true  //暂时理解与上面相同，通过实验也没什么区别;

number:true  //必须是数字;

-----------------------------

digits:true  //必须是整数;

creditcard:true  //合法的信用卡号;

equalTo:"#id"  //与#id相同的输入（用于再次输入密码）;(值为选择器)

accept:    //输入拥有合法后缀名的字符串（上传文件的后缀）

maxlength:10  //输入长度最多是 10 的字符串（汉字算一个字符）;

minlength:5   //输入长度最小是 5 的字符串（汉字算一个字符）。

rangelength:[5,10]  //输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。

range:[5,10]    //输入值必须介于 5 和 10 之间。

max:5   //输入值不能大于 5。

min:5  //输入值不能小于5;

---------------------------------------------------------------------------------------

上面的正则都是插件里面已经定义好的,怎么样才能自己定义一个正则判断相应的form表单元素

jquery-validata为我们提供了$.validator.addMethod()方法,用于自定义一个正则规则;

使用方法

            //参数一:验证的字符串;区分验证的那个数据(正则规则的键值);
            
            // 参数二：回调函数;value参数的值,element 验证的元素;

            $.validator.addMethod("isCarId", function (value, element) {

                var isID = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|x|X)$)/;

                return this.optional(element) || (isID.test(value));

            }, "身份验证格式不正确");

使用时直接拷贝下来改下规则名字和正则就可以直接使用了

$.validator.addMethod("效验规则名",function(value,element){
    var letter=/正则表达式/;
    return this.optional(element)||letter.test(value);
},"默认弹出文字");

用其他方式代替默认的subimt

可以设置 validate 的默认值，

$.validator.setDefaults({
    submitHandler: function () {
        alert("提交事件,发送ajax请求");
    }
})

 $("#signupForm").validate({
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        }    
    });

使用ajax方式

 $(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 }) 

 ------------------------------------------------------------------

 更改错误信息的样式

 .error{
     //弹出信息的样式
 }
 input.error{
     //input的错误样式
 }
 label.error{
     //label的错误样式
 }