Javascript验证未按预期执行

Javascript validation not performing as exepected

本文关键字：执行 验证 Javascript      更新时间：2023-09-26

我有一个问题与我的JS验证代码。当我提交表单并且有错误时，表单不应该再继续。但是，代码并没有停止，相反，它继续下一行，显示了一个成功的消息，尽管仍然有错误。

我已经明确地写过，如果，例如，字段是空的，那么return false…

为什么代码继续到下一行，即使有return false ?

按下submit，你就会明白我的意思了。

JS: 

(function(window, $) {
    var Namespace = (function(Namespace) {
        Namespace = {
            // Main
            run : function() {
                this.validate.run('form');
            },              
            // Validation
            validate : {
                // error message span
                messageBox : '<span class="message" />',
                // add any field here
                fields : {
                    nameField : $('#contact-name'),
                    emailField : $('#contact-email'),
                    phoneField : $('#contact-phone')
                },
                // run validation
                run : function(formName) {
                    $(formName).on('submit', $.proxy(this.validateField, this));
                },
                validateField : function() {
                    for (var field in this.fields) {
                        if (this.fields.hasOwnProperty(field)) {
                            this.checkField(this.fields[field]);
                        }
                    }
                    $('#general-message-section').text('Form successfully sent, thank you!');
                    return false;
                },
                checkField : function(field) {
                    var messageBox = $(this.messageBox);
                    field.closest('li').find('.message').remove();
                    if (field.hasClass('required')) {
                        if (!field.val()) {
                            messageBox.text('This field is empty!');
                            field.closest('li').append(messageBox);
                            return false;
                        }
                    }
                    if (this.fields.emailField.val()) {
                        this.fields.emailField.closest('li').find('.message').remove();
                        if (!this.fields.emailField.val().match(this.regEx.email)) {
                            messageBox.text('Only email format accepted!');
                            this.fields.emailField.closest('li').append(messageBox);
                            return false;
                        }
                    }
                    if (this.fields.phoneField.val()) {
                        this.fields.phoneField.closest('li').find('.message').remove();
                        if (!this.fields.phoneField.val().match(this.regEx.numbers)) {
                            messageBox.text('Only numbers are accepted!');
                            this.fields.phoneField.closest('li').append(messageBox);
                            return false;
                        }
                    }
                },
                regEx : {
                    email : /^([a-z0-9_'.-]+)@(['da-z'.-]+)'.([a-z'.]{2,6})$/,
                    numbers : /^[0-9]+$/
                }
            }
        };
        return Namespace;
    }(Namespace || {}));
    // make global
    window.Namespace = Namespace;
}(window, jQuery));
// run it...
Namespace.run();
HTML: 

<p id="general-message-section"></p>
<form id="contact-form" method="post" action="#">
    <fieldset>
        <ul>
            <li>
                <label for="contact-name">Contact name *:</label>
                <input type="text" id="contact-name" tabindex="1" class="required" autofocus />
            </li>
            <li>
                <label for="contact-email">Contact email address *:</label>
                <input type="text" id="contact-email" tabindex="2" class="required" />
            </li>
            <li>
                <label for="contact-phone">Contact phone number:</label>
                <input type="text" id="contact-phone" tabindex="3" />
            </li>
            <li>
                <input type="submit" id="submit-btn" tabindex="4" value="Submit" />
            </li>
        </ul>
    </fieldset>
</form>

多谢

我猜您在验证逻辑中缺少检查。代码:

validateField : function() {
    for (var field in this.fields) {
        if (this.fields.hasOwnProperty(field)) {
            this.checkField(this.fields[field]);
        }
    }
    $('#general-message-section').text('Form successfully sent, thank you!');
    return false;
},

调用checkField但不检查其结果(可能为假)。我想你可以这样写:

validateField : function() {
    for (var field in this.fields) {
        if (this.fields.hasOwnProperty(field)) {
            if(!this.checkField(this.fields[field])) {
                alert("There are errors!");
                return false;
            }
        }
    }
    $('#general-message-section').text('Form successfully sent, thank you!');
    return false;
},

当然checkField中的return true;如果它是正确的(在最后)，否则它也不会工作

这将检查所有必需的字段，并将valid设置为false，如果任何checkField()返回false，但不会中断For循环，它将在循环后检查valid是否为false并中断:

        validateField : function() {
            var valid = true;
            for (var field in this.fields) {
                if (this.fields.hasOwnProperty(field)) {
                    if(this.checkField(this.fields[field]) === false) valid = false;
                }
            }
            if(!valid) return false;
            $('#general-message-section').text('Form successfully sent, thank you!');
        }

jsfiddle

相关文章：