jQuery表单验证Validata

当我们需要验证用户输入的信息是否正确时，一般会用js去判断，但如果有很多信息都需要验证时，用jQuery validata会有事半功倍的效果呢。

语法如下：

$("#createprojectForm").validate({    rules : {        project_name : {            required : true,            minlength : 2,        },        begin_date : {            dateISO:true        },        phone : {            isPhone : true,        },    },    messages : {        project_name : {            required : "请输入项目名称",            minlength : "请输入最少2个字"        },        begin_date : {            dateISO: "请输入有效的日期 (yyyy-mm-dd)"        },    },    submitHandler:function(form){    }});

rules里填写的是验证的规则、messages里填写的是错误提示信息、submitHandler就是提交表单啦！

“createprojectForm”：验证的表单id
“project_name 、phone ”： 验证的字段id
“required、dataISO”： validata自带的验证规则名

仔细看代码的朋友会发现为什么messages里没有phone的错误提示呢？因为它是自定义规则，何为自定义规则呢？当validata里的自带规则不能满足我们的需求时，它有个自定义规则。我们来看下该怎用：

//验证手机号$.validator.addMethod(         "isPhone",           //自定义验证规则名    function(value, element)            {                        var tel = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;                     //手机号的正则表达式        return this.optional(element) || (tel.test(value));         } , "请输入正确的手机号"       //错误提示  );

自定义好了就可以像validata自带的验证规则一样直接用啦！
如果想要看更多的自定义http://polaris.blog.51cto.com/1146394/258781/这篇文章写得炒鸡详细的；

但如果想要看更多的正则表达式我的博客里也有(⊙o⊙)哦！欢迎观看呢
http://blog.csdn.net/it429/article/details/50835128

最后插播个小插曲：以上的验证能解决大部分表单验证，但我在项目里碰到个难题，验证竣工时间不能早于开工时间，找了好久好久好久……，试了好多好多好多次……，才有了下面的成果

$("#ProjectForm").validate({    rules : {        begin_date : {            dateISO:true        },        end_date : {            dateISO:true,            isEndTime:true,        },    },    messages : {    },debug:true})

自定义验证规则：

//验证日期    $.validator.addMethod("isEndTime",function(value,element){    var begin_date = $("#begin_date").val();    var days = getDuration(value,begin_date);    if(days < 0){        return false;    }else{        return true;    }},"竣工时间不能早于开工时间");

是不是很好奇为什么不用取end_date的值呢？其实……value就是他的值，因为这个验证规则名写在了end_date的rules里啦。

计算日期天数差：
http://blog.csdn.net/it429/article/details/51668955

//计算日期天数差  (工期)    function  getDuration(sDate1,  sDate2){    //sDate1和sDate2是2006-12-18格式          var  aDate,  oDate1,  oDate2,  iDays          aDate  =  sDate1.split("-")          oDate1  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])    //转换为12-18-2006格式          aDate  =  sDate2.split("-")          oDate2  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])          iDays  =  parseInt((oDate1  -  oDate2)  /  1000  /  60  /  60  /24) + 1    //把相差的毫秒数转换为天数          return iDays;    }

罪魁祸首终于来啦！！！
为什么还要加下面面这一段代码呢？因为调试发现文本框不能识别用户是否选择了日期，所以要用layerDate插件的选择日期完毕的回调。(日期选择器我们用的是 layerDate 插件)

$("#begin_date").click(function(){    laydate({        elem: '#begin_date',        choose: function(datas){ //选择日期完毕的回调        }    });});