当我们需要验证用户输入的信息是否正确时,一般会用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){ //选择日期完毕的回调 } }); });