Javascript jQuery验证日期范围问题
我的代码中有许多点,其中有成对的相关开始和结束日期字段(范围)。我需要验证开始日期是否早于结束日期。我正在使用jQuery验证插件 这是我的代码: 标记:Javascript jQuery验证日期范围问题,javascript,jquery,validation,jquery-validate,Javascript,Jquery,Validation,Jquery Validate,我的代码中有许多点,其中有成对的相关开始和结束日期字段(范围)。我需要验证开始日期是否早于结束日期。我正在使用jQuery验证插件 这是我的代码: 标记: <form id="myform"> <input type="text" name="startDate" id="startDate" class="validDate" /> <br/> <input type="text" name="endDate" id="endDate" c
<form id="myform">
<input type="text" name="startDate" id="startDate" class="validDate" />
<br/>
<input type="text" name="endDate" id="endDate" class="validDate" />
<br/>
<input type="submit" />
</form>
js:
$(函数(){
//简单日期mm/dd/yyyy格式
$.validator.addMethod('validDate',函数(值,元素){
返回此.optional(element)| |/^(0?[1-9]| 1[012])[/](0?[1-9]|[12][0-9]|[3[01])[/][0-9]{4}$/.test(value);
},“请以mm/dd/yyyy格式提供日期”);
$.validator.addMethod('dateBefore',函数(值、元素、参数){
//如果结束日期有效,也要验证它
var end=$(参数);
如果(!end.data('validation.running')){
$(元素).data('validation.running',true);
本.要素(完);
$(元素).data('validation.running',false);
}
返回this.optional(元素)| this.optional(end[0])| | new Date(value)new Date($(参数).val());
},“必须在相应的开始日期之后”);
$('#myform')。验证({//初始化插件
规则:{
startDate:{dateBefore:'#endDate',必填项:true},
endDate:{dateAfter:'#startDate',必需:true}
},
submitHandler:函数(表单){//用于演示
警报(“已提交的有效表单”);//用于演示
返回false;//用于演示
}
});
});
我希望这样,每当一个日期字段更改时,我都会进行检查以确保范围有效(例如,开始<结束)
我遇到的问题是,如果我输入一个有效范围,然后将结束日期的年份更改为开始日期的年份之前的年份,它将清除开始日期上的错误,但不会清除结束日期字段上的错误。我已经调试并进入dateAfter方法,看到它返回真值!我甚至可以(无需进一步修改字段值)点击提交按钮,然后错误清除,表单提交
你知道为什么它不能清除它吗
编辑进一步澄清我复制的步骤:
setTimeout($.proxy(
function () {
this.element(end);
}, this), 0);
我还为清除“validation.running”标志添加了一个setTimeout,以确保在“other”字段验证之前不会清除该标志。其他注意事项:我想要的是,当范围无效时,两个字段都将失效,一旦余额恢复,两个字段都将重新验证。数据('validation.running',bool)是为了避免无限循环。用户可以通过改变开始或结束来恢复原力的平衡。我无法用给出的步骤重现您的问题。结束消息在步骤7-8中不清楚。很抱歉造成混淆!我已经更新了步骤,以更好地反映我正在做的事情。事实上,结束消息没有被清除(并且在应该的时候没有这样做,即使我看到dateAfter方法运行并返回true),这就是问题所在。步骤5是首先演示问题的地方。步骤9是没有出现问题的地方(这让人沮丧,因为为什么它会在那里工作,而不是回到步骤5)。注意:proxy()调用是为了确保
这个是正确的上下文,在本例中是验证器实例。
this.element(end);
setTimeout($.proxy(
function () {
this.element(end);
}, this), 0);