我如何创建一种绕过密码确认和电子邮件确认的方式


How would I create a way around password confirmation and email confirmation?

你好,我已经建立了一个完整的工作表单与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>
JQUERY JAVASCRIPT/

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密码的值被更改?

电子邮件也是一样,如果这有意义的话??

不会使用jquery验证解决你的问题,这样的插件会为你做所有这些,即使两个验证发生冲突…

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

,看看这里的演示:http://jquery.bassistance.de/validate/demo/

在上面的代码中这样做:

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表单验证插件之一。即使你仍然想自己编写验证,也可以看看这些插件的代码,它们会给你很多关于如何以更好的方式完成这里所做的事情的想法。

我认为你要问的问题是,你不能只在onchange事件中做一个字段的验证,因为你有两个相互依赖的字段,所以当一个改变时,你必须验证它们两个。任何时候,您更改密码字段,您也必须验证确认密码字段,反之亦然。而且,当用户还没有到达时,您必须优雅地处理一个空的确认字段。

并且,您应该在提交表单之前验证所有内容,如果有任何内容未通过验证,则不要提交表单。