jQueryvalidation：需要有效的电话或有效的电子邮件

使用jQueryvalidation的第一天，但​​不是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" } }); 

}）;

但它失败了，因为每个有效性检查调用另一个，无限递归并崩溃浏览器。

必须有一些简单的方法来做到这一点，但我已经花了将近两个小时，它逃脱了我:(

Answer 1

您可以在使用后创建方法

创建方法：

 $.validator.addMethod("eitherEmailPhone", function(value, element) { isPhone = (this.optional(element) || /^\d+$/.test(value)) && this.getLength($.trim(value), element) <= 12 && this.getLength($.trim(value), element) >= 11 ; isEmail = this.optional(element) || /^((([az]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([az]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([az]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([az]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([az]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([az]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([az]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([az]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([az]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([az]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value); return isPhone || isEmail; }, "Please enter either phone or e-mail"); 

现在你可以使用方法“oneEmailPhone”对于multidata情况：

在这种情况下，电话格式只是数字

Answer 2

好的，超级简单的解决方案，忘了早点发布 – 拦截表单提交，先手动validation，然后触发插件validation。 这是一个需要选择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(); }); 

可以轻松调整以处理您不希望通过jQueryvalidation插件执行的任何validation。

Answer 3

这是一个老问题，现在可用的更好的解决方案是jQuery Groups。 jQuery组的示例 。 validation将如下所示

 $( "#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”。

确保包含组validation所需的additional-methods.min.js 。