您的位置:首页 > Web前端 > JQuery

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

2017-03-28 16:43 363 查看
表单提交时,经常会需要对日期进行验证,比如结束时间必须大于开始时间。

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

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

<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()将时间戳转为日期对象

转为对象之后,就能够比较时间大小了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐