使用jQuery的文本框的多個驗證錯誤

Question

我想在單擊按鈕時打印特定的emty錯誤消息以及針對年齡字段的數字錯誤消息。 對於我的代碼，僅顯示最后一條錯誤消息。
這是出於驗證目的。

<script type="text/javascript">
            $(document).ready(function () {
                $("#<%=btnSubmit.ClientID %>").click(function () {
                    var error = 0;
                    var name = $('#<%=txtName.ClientID%>').val();

                    if ($.trim(name) == '') {
                        $('#name_error_msg').text('Name cannot be Empty');
                        $('#name_error_msg').parent().show();
                        error = 1;
                    } else
                        $('#name_error_msg').text('');


                    var country = $('#<%=ddlCountry.ClientID%>').val();
                    if (country == 0) {
                        $('#country_error_msg').text('Please select the Country');
                        $('#country_error_msg').parent().show();
                        error = 1;
                    }
                    else
                        $('#country_error_msg').text('');



                    var age = $('#<%=txtAge.ClientID%>').val();
                    if ($.trim(age) == '') {
                        $('#age_error_msg').text('Invalid Age');
                        $('#age_error_msg').parent().show();
                        error = 1;
                    }

                    var filter = /^[0-9-+]+$/;
                    if (!filter.test(age)) {
                        $('#age_error_msg').text('Invalid Age');
                        $('#age_error_msg').parent().show();
                        error = 1;
                    }
                    else
                        $('#age_error_msg').text('');


                    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                    if (!filter.test(emailReg)) {
                        $('#email_error_msg').text('Invalid email format');
                        $('#email_error_msg').parent().show();
                        error = 1;
                    }
                    else {
                        $('#email_error_msg').text('');
                    }
                    var email = $('#<%=txtEmail.ClientID%>').val();
                    if ($.trim(email) == '') {
                        $('#email_error_msg').text('Email cannot be Empty');
                        $('#email_error_msg').parent().show();
                        error = 1;
                    } else {
                        $('#email_error_msg').text('');
                    }



                    if (!($('#<%=ChkAgree.ClientID%>').is(':checked'))) {
                        error = 1;
                        $('#check_error_msg').html("Please Tick the Agree to Terms of Use.");
                        $('#check_error_msg').parent().show();
                    }
                    else
                        $('#check_error_msg').html(" ");

                    if (error) {
                        return false;
                    } else {
                        return true;
                    }
                });


            });
        </script>

Answer 1

您需要做的就是更換：

var age = $('#<%=txtAge.ClientID%>').val();
if ($.trim(age) == '') {
    $('#age_error_msg').text('Invalid Age');
    $('#age_error_msg').parent().show();
    error = 1;
}

var filter = /^[0-9-+]+$/;
if (!filter.test(age)) {
    $('#age_error_msg').text('Invalid Age');
    $('#age_error_msg').parent().show();
    error = 1;
}
else
    $('#age_error_msg').text('');

與：

var filter = /^[0-9-+]+$/;
var age = $('#<%=txtAge.ClientID%>').val();
if ( $.trim(age) == '' || !filter.test(age)) {
    $('#age_error_msg').text('Invalid Age');
    $('#age_error_msg').parent().show();
    error = 1;
} else {
    $('#age_error_msg').text('');
}

Answer 2

您可以創建一個temp變量來累加每個錯誤。

                var age_errors = [];
                var age = $('#<%=txtAge.ClientID%>').val();
                if ($.trim(age) == '') {
                    age_errors.push('Age is empty');
                    $('#age_error_msg').parent().show();
                    error = 1;
                }

                var filter = /^[0-9-+]+$/;
                if (!filter.test(age)) {
                    age_errors.push('Invalid Age number');   
                    $('#age_error_msg').parent().show();
                    error = 1;
                }
                // set the error: empty string or a comma-separated list.
                $('#age_error_msg').text(age_errors.join(', '));