使用jQuery验证的第一天,但不是jQuery的第一天。很简单的问题:我有三个文本输入:姓名,电话和电子邮件。我想要名字(没有汗水)和EITHER手机或电子邮件,并确保输入在EITHER手机或电子邮件中有效。我试过这个:
$(document).ready(function() {
$("#contactForm").validate({
debug:true,
rules: {
name: {
required: true
},
email: {
email:true,
required: function(element){
!$("#phone").valid();
}
},
phone: {
phoneUS: true,
required: function(element){
!$("#email").valid();
}
}
},
messages: {
name: "Please specify your name",
email: {
required: "Please enter a valid email"
},
phone: "Please enter a 10 digit phone number"
}
});
});
但它失败了,因为每个有效性检查调用另一个,无限递归并崩溃浏览器。
必须有一些简单的方法来做到这一点,但我已经花了将近两个小时,它逃脱了我:(
您可以创建自己的方法
$.validator.addMethod(
"email_or_phone_number",
(value, element) => {
this.optional(element) || /*is optional*/
/^\d{10,11}$/.test(value) || /*is phone number*/
/\S+@\S+\.\S+/.test(value) /*is email*/
},
"Please enter either phone number or e-mail"
);
现在您可以使用方法“email_or_phone_number”对于multidata案例:
<input type="text" class="{email_or_phone_number:true}" value="" />
您可以根据自己的需要在方法中更改正则表达式
好的,超级简单的解决方案,忘了早点发布 - 拦截表单提交,先手动验证,然后触发插件验证。这是一个示例,需要选择n个复选框之一(根据实际项目进行调整,因此可能有一些拼写错误,但是你得到了jist):
(document).ready(function() {
// on form submission
$('form#signup').submit(function() {
// make sure a checkbox is selected
var checked = false;
$('input.checkboxGroupMember').each(function(index) {
if ($(this).attr('checked')) {
checked = true;
}
});
if (checked == false) {
// do whatever to handle the failure here
$('div#feedback').html('Please select a checkbox');
return false;
} else {
$('form#signup').validate();
}
});
// once a checkbox is selected, clear feedback
$('form input.checkboxGroupMember').change(function(index) {
if ($(this).attr('checked')) {
$('div#feedback').empty();
}
});
$('form#signup').validate();
});
可以轻松调整以处理您不希望通过jQuery验证插件执行的任何验证。
这是一个老问题,现在可用的更好的解决方案是jQuery Groups。 Example of jQuery Groups。验证将如下所示
$( "#myform" ).validate({
rules: {
mobile_phone: {
require_from_group: [1, ".phone-group"]
},
home_phone: {
require_from_group: [1, ".phone-group"]
},
work_phone: {
require_from_group: [1, ".phone-group"]
}
}
});
您的三个字段都将具有class =“phone-group”。
确保包含组验证所需的additional-methods.min.js。