jquery validate 手动触发方式
1,onkeyup 键盘离开
2,onfocusout 失去焦点
3,valid()方法手动调用
但如果直接按照文档中的用法来用onkeyup和onfocusout会出现:SCRIPT438: 对象不支持“call”属性或方法 这个错误
要写成:
onfocusout/onkeyup的默认值是false,如果需要开启对当前文本域的验证,则应该写成:
onfocusout: function(element) { $(element).valid(); }
onkeyup: function(element) { $(element).valid(); }
valid()就很好理解了,直接根据id或者其它元素选择器调用就可以了。
栗子:
HTML:
<form class="form-horizontal" role="form" id="type-reward-form-1" action="mvc/onDuty/onDuty_set_ondutyType.json" method="post">
<div class="well">
<div class="form-group">
<%--隐藏域--%>
<input type="hidden" name="id">
<%--类型--%>
<input type="hidden" name="type" value="1">
<%--角色报酬--%>
<input type="hidden" name="typeRewardJson" id="dailysJson">
<div class="col-sm-12">
<p><span>日常值班:</span>中午<input type="text" name="startTime" id="daily-start1-dutyTime" class="myInputWidth ">至<input type="text" name="endTime" id="daily-end1-dutyTime" class="myInputWidth ">
晚上:<input type="text" name="startTime2" id="daily-start2-dutyTime" class="myInputWidth ">至<input type="text " name="endTime2" id="daily-end2-dutyTime"
class="myInputWidth "></p>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<p>角色A:<input type="number" name="dailyA" id="dailyA" class="myInputWidth" required> 角色B:<input type="number" id="dailyB" name="dailyB" class="myInputWidth "> 角色C:<input type="number" id="dailyC" name="dailyC" class="myInputWidth "> 角色D:<input type="number" id="dailyD" name="dailyD" class="myInputWidth "> 角色E:<input type="number" id="dailyE" name="dailyE" class="myInputWidth ">
</p>
</div>
</div>
</div>
</form>
JS:
//验证类型报酬表单
$("#type-reward-form-1").validate({
onfocusout: function(element) {
var res = $(element).valid();
if(!res) {
$(element).css("border-color", "red");
}else {
$(element).removeAttr("style");
}
},
rules : {
startTime : {
required : true
},
endTime : {
required : true
},
startTime2 : {
required : true
},
endTime2 : {
required : true
},
dailyA : {
required : true
},
dailyB : {
required : true
},
dailyC : {
required : true
},
dailyD : {
required : true
},
dailyE : {
required : true
},
},
});
// 或者点击保存时手动调用
//提交表单
function submitDutyInfo() {
var dailyForm = $("#type-reward-form-1").valid();//dailyForm 为布尔类型
}
效果:
本文介绍了在jQuery Validate插件中如何手动触发验证,包括onkeyup和onfocusout事件的正确设置方法,以及使用valid()方法进行调用的示例代码。在使用onkeyup和onfocusout时需要注意避免出现'对象不支持“call”属性或方法'的错误。


被折叠的 条评论
为什么被折叠?



