如何创建一个简单的,自定义规则使用jQuery验证插件(使用addMethod),不使用正则表达式?
例如,哪个函数创建的规则只在至少选中一组复选框中的一个时才生效?
如何创建一个简单的,自定义规则使用jQuery验证插件(使用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"
}
}
});
});
其他回答
步骤1包含cdn like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
2 .编码
$(document).ready(function(){
$("#submit").click(function () {
$('#myform').validate({ // initialize the plugin
rules: {
id: {
required: true,
email: true
},
password: {
required: true,
minlength: 1
}
},
messages: {
id: {
required: "Enter Email Id"
},
password: {
required: "Enter Email Password"
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
}):
});
自定义规则和数据属性
您可以创建一个自定义规则,并使用data属性将其附加到元素上,使用语法data-rule-rulename="true";
因此,要检查一组复选框中是否至少有一个被选中:
data-rule-oneormorechecked
<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" />
调用addMethod
$.validator.addMethod("oneormorechecked", function(value, element) {
return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");
你也可以通过使用语法data-msg-rulename="my new message"来覆盖规则的消息(即:必须选择至少1个)。
NOTE
如果使用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");
你可以像这样添加一个自定义规则:
$.validator.addMethod(
'booleanRequired',
function (value, element, requiredValue) {
return value === requiredValue;
},
'Please check your input.'
);
并将其添加为如下规则:
PhoneToggle: {
booleanRequired: 'on'
}
// 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 }
});