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){ //选择日期完毕的回调

        }
    });
});