jquery mobile - jquery验证规则是否可能使用OR

Question

我正在创建一个小型jquery移动项目，并决定使用jqueryvalidation http://jqueryvalidation.org/进行表单验证。我有一个弹出框，用户输入一个数字，这是他们的电话或电子邮件(不幸的是，这必须保持这样，因为数据库)，所以我想使用验证说，该字段必须包含电子邮件:或数字:。

你知道这是否可能吗?还是一个变通方案?使用取决于:在这种情况下也不能工作，因为没有条件可以在每个数据库上工作(主电话/电子邮件并不总是被填充)。

                      <form id='addNumber' action ='' method='post' data-ajax='false'>
                        <div class="ui-field-contain">
                        <label for="phoneType">Type</label>
                            <select name="phoneType" id="phoneType" data-native-menu="false">
                                <?php echo $phoneInnerOptions; ?>
                            </select>
                        </div>
                        <div class="ui-field-contain">
                            <label for="phoneNumber">Number</label>
                            <input type="text" name="phoneNumber" id="phoneNumber" value="">
                        </div> 
                        <div class="ui-field-contain">
                            <label for="primary">Primary Contact</label>
                            <select name="primary" id="primary" data-native-menu="false" >
                                <option value="1">Primary Phone</option>
                                <option value="2">Primary Email</option>
                                <option value="3"></option>
                            </select>
                        </div> 
                        <div class='ui-grid-a'>
                            <div class='ui-block-a'><input type='submit' value='Update' class='ui-btn ui-btn-inline' data-transition='pop' /></div>
                            <div class='ui-block-b'><a href='#' id="addNumberReset" class='ui-btn' data-rel='back' data-transition='pop'>Cancel</a></div>
                        </div>
                    </form>

和当前验证:

 $().ready(function() {     
                    // validate add number form
                 $("#addNumber").validate({
                        errorPlacement: function(error, element) {
                            error.insertAfter(element.parent()); // <- make sure the error message appears after parent element (after textbox!)
                        },
                        rules: {
                            phoneNumber: "required",
                        },
                        messages: {
                            phoneNumber: "Please enter a valid phone or email",
                        }
                    }); //end validate
                });// end function

任何帮助或建议都将不胜感激:)

Answer 1

在这种情况下，您最好的选择是使用.addMethod()方法编写您自己的规则。

---

来自docs的简单示例:

jQuery.validator.addMethod("myrule", function(value, element) {
    // return 'true' to pass validation or return 'false' to fail validation
    return this.optional(element) || /^http://mycorporatedomain.com/.test(value);
}, "Please specify the correct domain for your documents");

标记来声明这个示例规则:

rules: {
    myfield: {
        myrule: true  // only passes validation if "http://mycorporatedomain.com" is entered
    }
}

---

文档中使用参数的简单例子:

jQuery.validator.addMethod("myrule", function(value, element, params) {
    // return 'true' to pass validation or return 'false' to fail validation
    return this.optional(element) || value == params[0] + params[1];
}, jQuery.validator.format("Please enter the correct value for {0} + {1}"));

标记来声明这个示例规则:

rules: {
    myfield: {
        myrule: [5,20] // only passes validation if '25' is entered
    }
}

---

两个示例中的

this.optional(element)使字段条目为"可选"。如果您还想要字段required，只需删除此部分。

您可以浏览一下additional-methods.js文件，看看这个方法的几十个实际的工作示例。

Answer 2

这是我最终使用的代码，以防其他人可能需要它。谢谢你的帮助，sparky

//creating the new rule
//Matches UK landline + mobile, accepting only 01-3 for landline or 07 for mobile to    exclude many premium numbers
jQuery.validator.addMethod('phonesUK', function(phone_number, element) {
phone_number = phone_number.replace(/(|)|s+|-/g,'');
return this.optional(element) || phone_number.length > 9 &&
phone_number.match(/^(?:(?:(?:00s?|+)44s?|0)(?:1d{8,9}|[23]d{9}|7(?:[45789]d{8}|624d{6})))$/);
});
//use phonesUK or standard email
jQuery.validator.addMethod("phoneOrEmail", function(value, element) {
return this.optional(element) ||
($.validator.methods["phonesUK"].call(this, value, element)) ||
($.validator.methods["email"].call(this, value, element));
}, "Please enter a valid phone number or email address");
//apply it to my page
    $(document).on("pagecreate", function () {      
                    // validate new number form
                    $("#addNumber").validate({
                        errorPlacement: function(error, element) {
                            error.insertAfter(element.parent()); // <- make sure the error message appears after parent element (after textbox!)
                        },
                        rules: {
                            phoneNumber: 
                                {
                                    phoneOrEmail: true,
                                    required: true,
                                }
                        },
                        messages: {
                            phoneNumber: "Please enter a valid phone number or email address",
                        },
                        //check if valid - post if is
                        submitHandler: function(form) {
                            $('#PopUpAddNumber').popup('close');
                            $.post("customer_AddNewNumber.php", $("#addNumber").serialize(),  function(response)
                            {
                                 LoadCustomerNumber();
                            });
                        }
                    }); //end validate
                                        //reset form after validate
                    $('#addNumberReset').click(function () {
                    $('#addNumber').validate().resetForm();
                    });
                }); // end function