jQuery validate 自定义验证方法比较日期三个参数

小咪咪 2022-06-18 02:22 168阅读 0赞

表单提交时，经常会需要对日期进行验证，比如结束时间必须大于开始时间。

可以通过[jQuery][] validate 自定义一个验证方法，进行验证。

<form id="form1" name="form1" method="post" action="demo.html">  
   <p>timeStart:  
     <input name="timeStart" type="text" id="timeStart" value="2011-02-17 10:00:00"> yyyy-MM-dd HH:mm:ss  
   </p>  
   <p>timeEnd:  
     <input name="timeEnd" type="text" id="timeEnd" value="2011-02-17 9:00:00"> yyyy-MM-dd HH:mm:ss  
   </p>  
   <p>  
     <input type="submit" name="Submit" value="提交">  
   </p>  
 </form>

<SCRIPT LANGUAGE="JavaScript">  
    jQuery(function()\{          
        jQuery.validator.methods.compareDate = function(value, element, param) \{  
            //var startDate = jQuery(param).val() + ":00";补全yyyy-MM-dd HH:mm:ss格式  
            //value = value + ":00";  
              
            var startDate = jQuery(param).val();  
              
            var date1 = new Date(Date.parse(startDate.replace("\-", "/")));  
            var date2 = new Date(Date.parse(value.replace("\-", "/")));  
            return date1 < date2;  
        \};  
          
        jQuery("\#form1").validate(\{  
            focusInvalid:false,  
            rules:\{  
                "timeStart":\{  
                    required: true  
                \},  
                "timeEnd": \{  
                    required: true,  
                    compareDate: "\#timeStart"  
                \}  
            \},  
            messages:\{  
                "timeStart":\{  
                    required: "开始时间不能为空"  
                \},  
                "timeEnd":\{  
                    required: "结束时间不能为空",  
                    compareDate: "结束日期必须大于开始日期!"  
                \}  
            \}  
        \});  
    \});  
  </SCRIPT>

以上是自定义方法，有三个参数的：其中的value是name值为‘timeEnd’的值；

param是

"timeEnd": \{  
                    required: true,  
                    compareDate: "\#timeStart"  
                \}

中的对应的“\#timeStart”，jQuery(param).val();即是input标签中id为timeStart的值；

element是name值为‘timeEnd’所在的标签。

通过Date.parse()方法将标准时间转化为时间戳

new Date()将时间戳转为日期对象

转为对象之后，就能够比较时间大小了。

[jQuery]: http://lib.csdn.net/base/jquery