基本上在这个注册系统中我想检查是否:
所有字段都已填满。
用户名长度检查。
密码长度检查。
检查电子邮件是否有效。
检查是否未收到电子邮件。
检查是否未使用用户名。
检查密码是否等于repassword。
问题:
第一步没问题,但在我填满所有输入后,相同的错误加速,但输入周围没有2px红色边框。
如果我不填写所有内容,我会得到相同的错误+红色边框。
基本上我想调试/排除当前系统正在执行的操作,并使用超时来测试localhost是否正常工作。
有我的代码:
$("#center").on('click', function(e) {
// Prevent submit.
e.preventDefault();
/**
* Variables
**/
// Errors div block
var errors = $(".errors");
// Username input
var username = $("#username");
// Password input
var password = $("#password");
// Re-password input
var repassword = $("#repassword");
// Email input
var email = $("#email");
// Display name input
var display = $("#display");
// Validating all forms
var incomplete = $(':input', this.form).filter(function() { return $(this).val() == ''; });
// For submit, need $this var
var self = this;
/************************************/
/**
* Booleans
**/
var inputsAreFilled;
var validateAccount;
var validatedUsername;
var validatedEmail;
/***
* SYSTEM START
**/
validating("Validating Inputs...");
setTimeout(function() {
$(':input', this.form).each(function(i, ele) {
if (ele.value.trim() == "") {
ele.style.border = '2px solid red';
parseError("One of the fields are empty.");
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
restore();
}
else
{
$(this).removeAttr('style');
}
});
if (!incomplete.length) {
inputsAreFilled = true;
} else {
inputsAreFilled = false;
}
}, 1000);
if (inputsAreFilled) {
validating("Validating Data...");
setTimeout(function() {
// Username length
if (username.val().length() < 3) {
parseError("Your username is too short.");
username.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (username.val().length > 20) {
parseError("Your username is too long.");
username.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (password.val().length < 5) {
parseError("Your password is too short.");
password.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (password.val().length > 20) {
parseError("Your password is too long.");
password.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (display.val().length < 3) {
parseError("Your display name is too short.");
display.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (display.val().length > 20) {
parseError("Your display name is too long.");
display.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (!isValidEmailAddress(email.val())) {
parseError("Your email address is not valid");
email.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (password.val() != repassword.val()) {
parseError("Your passwords are not equal.");
password.css("border", "solid 2px red");
repassword.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else {
validateAccount = true;
}
}, 1000);
if (validateAccount) {
validating("Checking username...");
setTimeout(function() {
validateUsername(username.val()).done(function(data) {
if ($.trim(data) == 1) {
validatedUsername = false;
parseError("That username is already in use.");
username.css("border", "solid 2px red");
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else {
validatedUsername = true;
}
});
}, 1000);
if (validatedUsername) {
validating("Checking email...");
setTimeout(function() {
validateEmail(email.val()).done(function(data) {
if ($.trim(data) == 1) {
validatedEmail = false;
parseError("That email is already in use.");
email.css("border", "solid 2px red");
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else {
validatedEmail = true;
}
});
}, 1000);
}
else
{
validating("Global Check - Please wait");
setTimeout(function() {
if (validateAccount && validatedUsername && validatedEmail && inputsAreFilled)
{
validating("Done - Redirecting...");
self.form.submit();
}
else
{
parseError("An error has occured!");
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
}
}, 1000);
}
}
}
});
我的职能:
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
}
function restore() {
$("#center").attr('value','Continue');
$(".displaying_form").css("opacity", "1.0");
}
function parseError(message) {
$(".errors").html(message + "<span id='close'>X</span>");
$(".errors").fadeIn();
}
function validating(message) {
$("#center").attr('value', message);
$(".displaying_form").css("opacity", "0.6");
$("#center").css("cursor", "default");
}
function validateUsername(username, type) {
return $.post("js/ajax/ajax.php", { validateUsername : 1 });
}
function validateEmail(username, type) {
return $.post("js/ajax/ajax.php", { validateEmail : 1 });
}
基本上,它没有进入下一步,它坚持第一步。 填写完所有输入后,它会给出错误:“其中一个字段为空。”
为什么这样做?为什么不继续?