Question

您好我已经使用ajax，jquery构建了一个完全正常工作的表单但是我遇到了一个小问题。

这是我的代码......

HTML 的

<form action="#" method="post">
<fieldset>
<legend>Login Details</legend>
<label>Your Email:</label><input id="email" name="email" type="text" onchange="return signup_ajax ('#email');" />
<label>Confirm Email:</label><input id="cemail" name="cemail" type="text" onchange="return signup_ajax ('#cemail');" />
<label>Password:</label><input id="password" name="password" type="text" onchange="return signup_ajax ('#password');" />
<label>Confirm Password:</label><input id="cpassword" name="cpassword" type="text" onchange="return signup_ajax ('#cpassword');" />
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label>Your Username:</label><input id="username" name="username" type="text" onchange="return signup_ajax ('#username');" />
</fieldset>

<input class="submit" type="submit" value="Create Account" />
</form>

JAVASCRIPT / JQUERY

function signup_ajax (id) {
var val = $(id).val();
$(id).after('<div class="loading"></div>');
if (id === '#email') {
    $('#email_error, #email_success').hide();
    $('.loading').delay(1000).hide(1);
    setTimeout(function () {
        $.post('http://www.example.com/ajax.php', {email: val},
        function (response) {
            finish_ajax (id, response);
        });
    }, 1050);
}
if (id === '#cemail') {
    var cemail_val = $('#email').val();
    $('#cemail_error, #cemail_success').hide();
    $('.loading').delay(1000).hide(1);
    setTimeout(function () {
        if (val !== cemail_val) {
            $(id).after('<div id="cemail_error" class="error">Emails do not match</div>');
        }
        else {
            $(id).after('<div id="cemail_success" class="success">Emails match</div>');
        }
    }, 1050);
}
if (id === '#password') {
    $('#password_error, #password_success').hide();
    $('.loading').delay(1000).hide(1);
    setTimeout(function () {
        if (val.length < 6) {
            $(id).after('<div id="password_error" class="error">Must be at least 6 characters</div>');
        }
        else {
            $(id).after('<div id="password_success" class="success">Success</div>');
        }
    }, 1050);
}
if (id === '#cpassword') {
    var cpassword_val = $('#password').val();
    $('#cpassword_error, #cpassword_success').hide();
    $('.loading').delay(1000).hide(1);
    setTimeout(function () {
        if (val !== cpassword_val) {
            $(id).after('<div id="cpassword_error" class="error">Passwords do not match</div>');
        }
        else {
            $(id).after('<div id="cpassword_success" class="success">Passwords match</div>');
        }
    }, 1050);
}
if (id === '#username') {
    $('#username_error, #username_success').hide();
    $('.loading').delay(1000).hide(1);
    setTimeout(function () {
        if (val.length < 3) {
            $(id).after('<div id="username_error" class="error">Must be at least 3 characters</div>');
        }
        else {
            $.post('http://www.example.com/ajax.php', {username: val},
            function (response) {
                finish_ajax (id, response);
            });
        }
    }, 1050);
}
} 

function finish_ajax (id, response) {
      $(id).after(response);
}

PHP

if (isset($_REQUEST['email'])) {
$q = $dbc -> prepare("SELECT email FROM accounts WHERE email = ?");
$q -> execute(array($_REQUEST['email']));
if (!filter_var($_REQUEST['email'], FILTER_VALIDATE_EMAIL)) {
    echo '<div id="email_error" class="error">This is not a valid email</div>';
}
elseif ($q -> rowCount() > 0) {
    echo '<div id="email_error" class="error">Email already owns an account</div>';
}
else {
    echo '<div id="email_success" class="success">Success</div>';
}
}
elseif (isset($_REQUEST['username'])) {
$q = $dbc -> prepare("SELECT username FROM accounts WHERE username = ?");
$q -> execute(array($_REQUEST['username']));
if ($q -> rowCount() > 0) {
    echo '<div id="username_error" class="error">Username already taken</div>';
}
else {
    echo '<div id="username_success" class="success">Success</div>';
}
}
else {
header('Location: http://www.projectv1.com');
exit();
}

当用户输入的密码不是所需长度时，一切正常。但是，如果用户继续使用与先前密码相同的值确认密码，则将按预期提供密码匹配。但是，由于第一个是不正确的，他们回去改变第一个，但第二个仍然说是匹配如果id密码的值改变，我怎么能再检查它？

与电子邮件相同，如果这有意义吗？

感谢您的时间......

Answer 1

不会使用jquery验证来解决你的问题，即使2次验证发生冲突，这样的插件也会为你做这一切......

在这里阅读更多相关信息： http://docs.jquery.com/Plugins/Validation

并在此处查看演示： http://jquery.bassistance.de/validate/demo/

Answer 2

在上面的代码中执行此操作：

if (id === '#password') {
    $('#password_error, #password_success').hide();
    $('.loading').delay(1000).hide(1);
    setTimeout(function () {
        if (val.length < 6) {
            $(id).after('<div id="password_error" class="error">Must be at least 6 characters</div>');
        }
        else {
            signup_ajax ('#cpassword');
        }
    }, 1050);
}

但我还建议使用已经提到的jQuery表单验证插件之一。即使你仍然想编写自己的验证，看一下这些插件中的一个或两个的代码，它们会给你很多关于如何以更好的方式做你正在做的事情的想法。

Answer 3

我认为您提出的问题是，您不能仅对onchange事件中的字段进行验证，因为您有两个相互依赖的字段，因此当一个字段发生更改时，您必须同时验证他们。任何时候，您更改密码字段，您还必须验证确认密码字段，反之亦然。并且，当用户尚未到达时，您将必须优雅地处理空的确认字段。

并且，您应该在提交表单之前验证所有内容，如果验证失败则不提交表单。

我如何创建密码确认和电子邮件确认的方法？

3 个答案: