jQuery正則表達式驗證錯誤

Question

我是編程新手。 我正在嘗試驗證表格。 我用php做到了（我正在使用Codeigniter），並且沒有問題，工作正常。

說到jQuery，我遇到了麻煩。 例如，對於用戶名，如果輸入驗證，則應顯示一個ok圖標。 為此，我這樣做：

var FormValidation = function () {

var handleValidation2 = function() {
    // for more info visit the official plugin documentation: 
    // http://docs.jquery.com/Plugins/Validation

        var form2 = $('#form-val');
        var error2 = $('.alert-error', form2);
        var success2 = $('.alert-success', form2);

        //IMPORTANT: update CKEDITOR textarea with actual content before submit
        form2.on('submit', function() {
            for(var instanceName in CKEDITOR.instances) {
                CKEDITOR.instances[instanceName].updateElement();
            }
        })

        form2.validate({
            errorElement: 'span', //default input error message container
            errorClass: 'help-inline', // default input error message class
            focusInvalid: false, // do not focus the last invalid input
            ignore: "",
            rules: {

                username: {
                    minlength: 2,
                    maxlength: 15,
                    regex: "^[a-zA-Z0-9]*[a-zA-Z]+[a-zA-Z0-9]*$",
                    required: true
                },

                name: {
                    minlength: 2,
                    maxlength: 50,
                    // regex: ,
                    required: true
                },

                lastname: {
                    minlength: 2,
                    maxlength: 50,
                    required: true
                },

                gender: {
                    required: true
                },

                date_born: {
                    required: true
                },

                email: {
                    required: true,
                    email: true
                },

                status: {
                    required: true
                },

                member_id: {
                    minlength: 5,
                },

                documentType_id: {
                    required: true
                },

                documentn: {
                    required: true,
                    minlength: 2
                },
                address_street: {
                    required: true
                },

                address_number: {
                    required: true
                },

                address_floor: {
                    required: false
                },

                zipcode: {
                    required: true
                },

                city: {
                    required: true
                },

                state: {
                    required: true
                },

                country_id: {
                    required: true
                },

                phone: {
                    required: true
                },

                cellphoneNumber: {
                    required: true
                },

                cellCompany: {
                    required: true
                },

                cellbrand: {
                    required: true
                },

                marital_status: {
                    required: true
                },

                sons: {
                    required: true
                },
            },

            messages: { // custom messages for radio buttons and checkboxes
                username: {
                    required: "Este campo es requerido",
                    minlength: "El nombre de usuario debe tener como mínimo 2 caracteres",
                    maxlength: "El nombre de usuario debe tener como máximo 15 caracteres",  
                },

                membership: {
                    required: "Please select a Membership type"
                },
                service: {
                    required: "Please select  at least 2 types of Service",
                    minlength: jQuery.format("Please select  at least {0} types of Service")
                }
            },

            errorPlacement: function (error, element) { // render error placement for each input type
                if (element.attr("name") == "education") { // for chosen elements, need to insert the error after the chosen container
                    error.insertAfter("#form_2_education_chzn");
                } else if (element.attr("name") == "membership") { // for uniform radio buttons, insert the after the given container
                    error.addClass("no-left-padding").insertAfter("#form_2_membership_error");
                } else if (element.attr("name") == "editor1" || element.attr("name") == "editor2") { // for wysiwyg editors
                    error.insertAfter($(element.attr('data-error-container'))); 
                } else if (element.attr("name") == "service") { // for uniform checkboxes, insert the after the given container
                    error.addClass("no-left-padding").insertAfter("#form_2_service_error");
                } else {
                    error.insertAfter(element); // for other inputs, just perform default behavior
                }
            },

            invalidHandler: function (event, validator) { //display error alert on form submit   
                success2.hide();
                error2.show();
                App.scrollTo(error2, -200);
            },

            highlight: function (element) { // hightlight error inputs
                $(element)
                    .closest('.help-inline').removeClass('ok'); // display OK icon
                $(element)
                    .closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group
            },

            unhighlight: function (element) { // revert the change done by hightlight
                $(element)
                    .closest('.control-group').removeClass('error'); // set error class to the control group
            },

            success: function (label) {
                if (label.attr("for") == "service" || label.attr("for") == "membership") { // for checkboxes and radio buttons, no need to show OK icon
                    label
                        .closest('.control-group').removeClass('error').addClass('success');
                    label.remove(); // remove error label here
                } else { // display success icon for other inputs
                    label
                        .addClass('valid').addClass('help-inline ok') // mark the current input as valid and display OK icon
                    .closest('.control-group').removeClass('error').addClass('success'); // set success class to the control group
                }
            },

            submitHandler: function (form) {
                success2.show();
                error2.hide();
            }

        });

        $('#form-val').select2({
            placeholder: "Select an Option",
            allowClear: true
        });

        //apply validation on chosen dropdown value change, this only needed for chosen dropdown integration.
        $('.chosen, .chosen-with-diselect', form2).change(function () {
            form2.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
        });

         //apply validation on select2 dropdown value change, this only needed for chosen dropdown integration.
        $('.select2', form2).change(function () {
            form2.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
        });
}

return {
    main function to initiate the module
    init: function () {           
        handleValidation2();
    }
};
}();

那是完整的代碼，尚未完成更改。 問題是，如果輸入少於2個字符或大於15個字符，則會出現錯誤，但是如果輸入正確，就不會出現圖標ok，並且在檢查時會出現以下錯誤：

未捕獲的TypeError：無法調用未定義的方法“調用”

如果我刪除規則，則“正則表達式”圖標會出現。 但是正如您在摘要中所看到的那樣，該字段不能正常工作。

可能是什么問題？ 提前thnx。

Answer 1

如果要匹配正則表達式而不編寫自定義方法（如Hayzeus的答案），請加載jquery-validate其他方法：

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>

然后，您可以使用pattern驗證方法：

            username: {
                minlength: 2,
                maxlength: 15,
                pattern: "[a-zA-Z0-9]*[a-zA-Z]+[a-zA-Z0-9]*",
                required: true
            },

該方法使用^和$自動包裝模式，因此您在正則表達式中不需要它們。

Answer 2

您不能簡單地在規則中提供正則表達式字符串。 您需要向驗證器添加自定義方法。

像這樣：

$.validator.addMethod("regex", function(value, element) {
    var regex = /^[a-zA-Z0-9]*[a-zA-Z]+[a-zA-Z0-9]*$/
    return regex.test(value);
}, "Invalid Name");

然后按照您的規則：

username: {
    minlength: 2,
    maxlength: 15,
    regex: true,
    required: true
}