Question

我做了一个小提琴，所以你可以自己测试一下：

http://jsfiddle.net/ProjectV1/9XQtb/

的Javascript

我编写了一些简单的验证，在函数创建表单错误数组之前，在函数末尾有一个if语句，如果任何数组== true则阻止表单提交的事件处理程序

我遇到的实际问题是表单本身是有效的，错误数组也是如此，但if语句不对确认输入都有效。

使用小提琴自己尝试（为了便于理解，我为输入本身旁边的输入添加了变量错误的结果）;

重新安排问题

要传递错误== false，则电子邮件必须有效，密码超过6个字符，用户名超过3个字符。

出于示例目的，我已将表单指向谷歌。

表单适用于非确认输入

如果您单击电子邮件，密码和用户名的输入字段，而没有选择确认输入并尝试提交表单，它将不会像错误变量返回true那样预期。然后填写它们，以便错误返回false而不选择确认输入字段，表单将按预期提交，因为错误变量返回false。

表单不适用于确认输入

但是如果你填写所有表单字段，以便其中一个或两个确认输入都包含错误，那么即使该输入字段的错误返回false，表单仍然会提交。

确认输入只会尝试验证它确认的输入是否返回为假。

为什么会发生这种情况，我该如何预防呢？它是否与确认输入嵌套在if语句中有关。

Javascript代码

$(document).ready(function() {

$('#joinForm input').blur(function() {
    var id = $(this).attr('id');
    joinAjax (id);
});

});

var errors = new Array();
errors[email] = null;
errors[cemail] = null;
errors[password] = null;
errors[cpassword] = null;
errors[username] = null;

function joinAjax (id) {

var val = $('#' + id).val();

if (id == 'email') {

    $('#emailMsg').hide();
    var reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;

    if (val == '') {
        errors[email] = true;
        $('#' + id).after('<div id="emailMsg" class="error">' + errors[email] + '</div>');
    }

    else if (reg.test(val) == false) {
        errors[email] = true;
        $('#' + id).after('<div id="emailMsg" class="error">' + errors[email] + '</div>');
    }

    else {
        errors[email] = false;
        $('#' + id).after('<div id="emailMsg" class="success">' + errors[email] + '</div>');
    }

    joinAjax('#cemail');

}

if (id == 'cemail') {

    $('#cemailMsg').hide();
    var reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
    var email = $('#email').val();

    if (reg.test(email) == true) {

        if (val != email) {
            errors[cemail] = true;
            $('#' + id).after('<div id="cemailMsg" class="error">' + errors[cemail] + '</div>');
        }

        else {
            errors[cemail] = false;
            $('#' + id).after('<div id="cemailMsg" class="success">' + errors[cemail] + '</div>');
        }

    }

    else {
        $('#cemail').val('');
    }
}

if (id == 'password') {

    $('#passwordMsg').hide();

    if (val == '') {
        errors[password] = true;
        $('#' + id).after('<div id="passwordMsg" class="error">' + errors[password] + '</div>');
    }

    else if (val.length < 6) {
        errors[password] = true;
        $('#' + id).after('<div id="passwordMsg" class="error">' + errors[password] + '</div>');
    }

    else {
        errors[password] = false;
        $('#' + id).after('<div id="passwordMsg" class="success">' + errors[password] + '</div>');
    }

    joinAjax('#cpassword');
}

if (id == 'cpassword') {

    $('#cpasswordMsg').hide();
    var password = $('#password').val();

    if (password.length >= 6) {

        if (val != password) {
            errors[cpassword] = true;
            $('#' + id).after('<div id="cpasswordMsg" class="error">' + errors[cpassword] + '</div>');
        }

        else {
            errors[cpassword] = false;
            $('#' + id).after('<div id="cpasswordMsg" class="success">' + errors[cpassword] + '</div>');
        }
    }

    else {
        $('#cpassword').val('');
    }        
}

if (id == 'username') {
    $('#usernameMsg').hide();

    if (val == '') {
        errors[username] = true;
        $('#' + id).after('<div id="usernameMsg" class="error">' + errors[username] + '</div>');
    }

    else if (val.length < 3) {
        errors[username] = true;
        $('#' + id).after('<div id="usernameMsg" class="error">' + errors[username] + '</div>');
    }

    else {
        errors[username] = false;
        $('#' + id).after('<div id="usernameMsg" class="success">' + errors[username] + '</div>');
    }
}

$('#joinForm').submit(function(event){
    if ((errors[email] == true) || (errors[cemail] == true) || (errors[password] == true) || (errors[cpassword] == true) || (errors[username] == true)) {
        event.preventDefault();
    }
    return true;
});

工作示例

http://jsfiddle.net/ProjectV1/9XQtb/3/

POINTYS建议后更改

var errors = {};
errors.email = true;
errors.cemail = true;
errors.password = true;
errors.cpassword = true;
errors.username = true;

function joinAjax (id) {

var val = $('#' + id).val();

if (id == 'email') {

    $('#emailMsg').hide();
    var reg = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;

    if (val == '') {

        $('#' + id).after('<div id="emailMsg" class="error">Enter your email</div>');
    }

    else if (reg.test(val) == false) {

        $('#' + id).after('<div id="emailMsg" class="error">Email invalid</div>');
    }

    else {

        errors.email = false;
        $('#' + id).after('<div id="emailMsg" class="success">Email OK</div>');
    }

    joinAjax('cemail');
}

if (id == 'cemail') {

    $('#cemailMsg').hide();
var email = $('#email').val();

    if (errors.email == false) {

        if (val != email) {

            $('#' + id).after('<div id="cemailMsg" class="error">Emails do not match</div>');
        }

        else {

            errors.cemail = false;
            $('#' + id).after('<div id="cemailMsg" class="success">Success</div>');
        }
    }

    else {

        $('#cemail').val('');
    }
}

if (id == 'password') {

    $('#passwordMsg').hide();

    if (val == '') {

        $('#' + id).after('<div id="passwordMsg" class="error">Enter a password</div>');
    }

    else if (val.length < 6) {

        $('#' + id).after('<div id="passwordMsg" class="error">Minimum length of 6</div>');
    }

    else {

        errors.password = false;
        $('#' + id).after('<div id="passwordMsg" class="success">Password OK</div>');
    }

    joinAjax('cpassword');
}

if (id == 'cpassword') {

    $('#cpasswordMsg').hide();
    var password = $('#password').val();

    if (errors.password == false) {

        if (val != password) {

            $('#' + id).after('<div id="cpasswordMsg" class="error">Passwords do not match</div>');
        }

        else {

            errors.cpassword = false;
            $('#' + id).after('<div id="cpasswordMsg" class="success">Success</div>');
        }
    }

    else {

        $('#cpassword').val('');
    }        
}

if (id == 'username') {

    $('#usernameMsg').hide();

    if (val == '') {

        $('#' + id).after('<div id="usernameMsg" class="error">Enter a username</div>');
    }

    else if (val.length < 3) {

        $('#' + id).after('<div id="usernameMsg" class="error">Minimum length is 3</div>');
    }

    else {

        errors.username = false;
        $('#' + id).after('<div id="usernameMsg" class="success">Username available</div>');
    }
}

$('#joinForm').submit(function(event){

    if ((errors.email == true) || (errors.cemail == true) || (errors.password == true) || (errors.cpassword == true) || (errors.username == true)) {
        event.preventDefault();
    }

    return true;
});
}

我解决了所有的指向建议，并添加了一些我自己的更改。

我将错误的默认值更改为true，只有在需要它们为false时才更改它们。这样做我没有必要在错误时将其更改为true。
更改div中的值以显示错误消息。
我没有检查确认原始输入确认是否对正则表达式或长度有效，我只是检查错误的值是否为假。

感谢大家的帮助，我希望人们可以从中吸取教训。

Answer 1

这里的内容不正确：

errors[email] = null;
errors[cemail] = null;
errors[password] = null;
errors[cpassword] = null;
errors[username] = null;

你想要的是：

errors.email = null;
errors.cemail = null;
errors.password = null;
errors.cpassword = null;
errors.username = null;

所有其他参考文献相同。如果“email”，“cemail”，“password”等都是带有某些值的变量用作键，则第一种形式（代码中当前的错误形式）将起作用。事实上，他们并没有在那时被定义。第二种形式使用这些名称作为属性名称。

或者，您可以将属性名称表示为字符串并使用括号：

errors["email"] = null;
errors["cemail"] = null;
errors["password"] = null;
errors["cpassword"] = null;
errors['username'] = null;

除非您的代码要区分缺少的属性和存在但具有空值的属性，否则无论如何都不需要将这些属性初始化为null。然而，在您的代码中，事情变得奇怪，因为您实际上使用这些名称定义变量，然后继续将它们用作间接属性名称引用。您可能想要查看对象属性引用语法在JavaScript中的工作方式。哦，也就是说，无论如何都不需要数组，因为你没有使用数字索引。它应该只是一个对象：

var errors = {};

编辑通过jsfiddle查看，还有其他一些问题。有一些递归调用你的“joinAjax”函数是没有意义的;我甚至无法说出他们应该做什么。然后，当您检测到错误时，将错误标志设置为“true”，然后在您显示的错误消息中直接使用该值（下面我修复了不正确的属性引用）：

        errors.email = true;
        $('#' + id).after('<div id="emailMsg" class="error">' + errors.email + '</div>');

我不知道你想要发生什么，但这对我来说有点奇怪。

Javascript表单错误数组未注册

1 个答案: