如何使用addMethod
不使用正则表达式的 jQuery Validate 插件(使用)创建简单的自定义规则?
例如,什么函数会创建一个规则,该规则仅在一组复选框中的至少一个被选中时才进行验证?
如何使用addMethod
不使用正则表达式的 jQuery Validate 插件(使用)创建简单的自定义规则?
例如,什么函数会创建一个规则,该规则仅在一组复选框中的至少一个被选中时才进行验证?
您可以通过执行以下操作来创建一个简单的规则:
jQuery.validator.addMethod("greaterThanZero", function(value, element) {
return this.optional(element) || (parseFloat(value) > 0);
}, "* Amount must be greater than zero");
然后像这样应用它:
$('validatorElement').validate({
rules : {
amount : { greaterThanZero : true }
}
});
只需更改“addMethod”的内容即可验证您的复选框。
$(document).ready(function(){
var response;
$.validator.addMethod(
"uniqueUserName",
function(value, element) {
$.ajax({
type: "POST",
url: "http://"+location.host+"/checkUser.php",
data: "checkUsername="+value,
dataType:"html",
success: function(msg)
{
//If username exists, set response to true
response = ( msg == 'true' ) ? true : false;
}
});
return response;
},
"Username is Already Taken"
);
$("#regFormPart1").validate({
username: {
required: true,
minlength: 8,
uniqueUserName: true
},
messages: {
username: {
required: "Username is required",
minlength: "Username must be at least 8 characters",
uniqueUserName: "This Username is taken already"
}
}
});
});
// add a method. calls one built-in method, too.
jQuery.validator.addMethod("optdate", function(value, element) {
return jQuery.validator.methods['date'].call(
this,value,element
)||value==("0000/00/00");
}, "Please enter a valid date."
);
// connect it to a css class
jQuery.validator.addClassRules({
optdate : { optdate : true }
});
您可以data
使用语法创建自定义规则并将其附加到使用属性的元素data-rule-rulename="true";
因此,要检查是否至少选中了一组复选框中的一个:
数据规则一个或多个检查
<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" />
添加方法
$.validator.addMethod("oneormorechecked", function(value, element) {
return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");
您还可以使用语法 覆盖规则的消息(即:必须选择至少 1 个)data-msg-rulename="my new message"
。
笔记
如果使用该data-rule-rulename
方法,则需要确保规则名称全部小写。这是因为 jQuery 验证功能dataRules
适用.toLowerCase()
于比较,而HTML5规范不允许大写。
工作示例
$.validator.addMethod("oneormorechecked", function(value, element) {
return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");
$('.validate').validate();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<form class="validate">
red<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" data-msg-oneormorechecked="Check one or more!" /><br/>
blue<input type="checkbox" name="colours[]" value="blue" /><br/>
green<input type="checkbox" name="colours[]" value="green" /><br/>
<input type="submit" value="submit"/>
</form>
谢谢,它奏效了!
这是最终的代码:
$.validator.addMethod("greaterThanZero", function(value, element) {
var the_list_array = $("#some_form .super_item:checked");
return the_list_array.length > 0;
}, "* Please check at least one check box");