Question

使用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"
    }
});

}）;

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

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

Answer 1

您可以通过

创建自己的方法

$.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="" />

您可以根据自己的需要在方法中更改正则表达式

Answer 2

定义自定义方法 在这里，手机号码不考虑印度手机号码的长度（10位数字）。您可以相应地进行更改。 Email Regex

$.validator.addMethod("email_or_mobile", function(value, element) {
        return /^\d{10,10}$/.test(value) ||   //Indian Mobile No. Lenth 10 
            /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value) //email
}, "Please enter valid email or mobile");

表单验证

 $('#loginForm').validate({
        rules: {

            email: {
                required: true,
                email_or_mobile: true //check custom method
            },
            password: {
                required: true,
            }
        },
        messages: {
            email: {
                required: "Please enter your email/mobile"
            },
            password: {
                required: "Please enter your password",
            }
        },
    });

Answer 3

好的，超级简单的解决方案，忘了早点发布 - 截取表单提交，先手动验证，然后触发插件验证。这是一个示例，需要选择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验证插件执行的任何验证。

Answer 4

这是一个老问题，现在可用的更好的解决方案是jQuery Groups。 Example of jQuery Groups。验证将如下所示

<div class="table-responsive" ng-init="initialise()">
    <table class="table table-condensed shortMargin" id="dashboardTable">
        <thead id="table-header">
            <tr>
                <th ng-click="sortData('respondentName')">
                    Respondent Name
                    <div ng-class="getSortClass('respondentName')"></div>
                </th>

                <th ng-click="sortData('assessmentTitle')">
                    Assessment Title
                    <div ng-class="getSortClass('assessmentTitle')"></div>
                </th>

                <th ng-click="sortData('positionTitle')">
                    Position Title
                    <div ng-class="getSortClass('positionTitle')"></div>
                </th>

                <th ng-click="sortData('status')">
                    Status
                    <div ng-class="getSortClass('status')"></div>
                </th>

                <th>Action</th>

            </tr>
        </thead>
        <tbody>

            <tr ng-repeat="task in TaskList | orderBy:sortColumn:reverseSort ">

                <td><a href="" ng-click="SetDetails(task)" data-toggle="modal" data-target="#RespondentDetailModal">{{task.respondentName}}</a></td>

                <td>
                    {{task.assessmentTitle}}
                </td>

                <td>
                    {{task.positionTitle}}
                </td>

                <td>
                    {{task.status}}
                </td>

                <td>
                    <a href="" class="btn btn-default btn-sm submit" type="button" ng-click="showTaskDetails(task)" data-target="#TaskDetails">
                        <span class="glyphicon glyphicon-zoom-in"></span>
                    </a>
                </td>

            </tr>

        </tbody>
    </table>

</div>

您的三个字段都将具有class =“phone-group”。

确保包含 additional-methods.min.js ，这是群组验证所必需的。

jQuery验证：需要有效的电话或有效的电子邮件

4 个答案: