你好,我已经建立了一个完整的工作表单与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
事件中做一个字段的验证,因为你有两个相互依赖的字段,所以当一个改变时,你必须验证它们两个。任何时候,您更改密码字段,您也必须验证确认密码字段,反之亦然。而且,当用户还没有到达时,您必须优雅地处理一个空的确认字段。
并且,您应该在提交表单之前验证所有内容,如果有任何内容未通过验证,则不要提交表单。