使用jQuery，一旦输入正确的电子邮件地址，如何获取下面的isValidEmailAddress错误消息（“请输入有效的电子邮件地址”）消失？当前，当我单击提交并重新输入电子邮件地址并收到提示“您的消息已成功发送！”的警报时，错误消息将停留在页面上。
$("#validationForm").submit(function(event){
var errorMessage="";
event.preventDefault();
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);
};
/* Regex validation of email address */
if (!isValidEmailAddress($("#email").val())) {
errorMessage="*Please enter a valid email address*";}
if (errorMessage==""){
alert("Your message has been successfully sent!");} else {
$("#error").html(errorMessage);}
});
放置在您旁边的方法相同alert：
if (errorMessage==""){
$("#error").html("");
alert("Your message has been successfully sent!");} else {
$("#error").html(errorMessage);}
或简单地
$("#error").html(errorMessage);
if (errorMessage==""){
alert("Your message has been successfully sent!");}
...因为errorMessage已经有""。
例子：
这是您的原始照片：
$("#validationForm").submit(function(event) {
var errorMessage = "";
event.preventDefault();
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);
};
/* Regex validation of email address */
if (!isValidEmailAddress($("#email").val())) {
errorMessage = "*Please enter a valid email address*";
}
if (errorMessage == "") {
alert("Your message has been successfully sent!");
} else {
$("#error").html(errorMessage);
}
});<p>Your original code</p>
<form id="validationForm">
<div><input type="text" id="email"></div>
<div id="error"></div>
<input type="submit" value="Send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>这是更新的版本：
$("#validationForm").submit(function(event) {
var errorMessage = "";
event.preventDefault();
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);
};
/* Regex validation of email address */
if (!isValidEmailAddress($("#email").val())) {
errorMessage = "*Please enter a valid email address*";
}
$("#error").html(errorMessage);
if (errorMessage == "") {
alert("Your message has been successfully sent!");
}
});<p>Your original code</p>
<form id="validationForm">
<div><input type="text" id="email"></div>
<div id="error"></div>
<input type="submit" value="Send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>这纯粹是一种样式，但我是否可以强烈敦促您使用几种含糊不清的括号和缩进样式中的任何一种，而不是}在代码块的最后一行隐藏结尾而不在有条件地添加某些内容时不进行缩进？这种风格非常容易出错。
这是上面最常见的支撑和缩进样式的简单版本：
$("#error").html(errorMessage);
if (errorMessage=="") {
alert("Your message has been successfully sent!");
}
这是具有else相同样式的较长版本：：
if (errorMessage=="") {
$("#error").html("");
alert("Your message has been successfully sent!");
} else {
$("#error").html(errorMessage);
}
有时您会看到else开始新的一行：
if (errorMessage=="") {
$("#error").html("");
alert("Your message has been successfully sent!");
}
else {
$("#error").html(errorMessage);
}
或另一种常见的（尽管不那么常见）：
if (errorMessage=="")
{
$("#error").html("");
alert("Your message has been successfully sent!");
}
else
{
$("#error").html(errorMessage);
}
同样，二元和三元运算符周围的空格有助于提高可读性：
if (errorMessage == "")
// ^ ^
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句