Question

使用jQuery，如果输入正确的电子邮件地址，如何获取下面的isValidEmailAddress错误消息（＆＃34;请输入有效的电子邮件地址＆＃34;）以消失？目前，当我点击提交时重新输入了电子邮件地址，并收到警告说＆＃34;您的邮件已成功发送！＆＃34;，错误信息仍保留在页面上。

$("#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);}


        });

Answer 1

就像你把它放在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 == "") // ^ ^

Answer 2

考虑使用HTML5输入电子邮件类型来避免部分或全部js

HTML5 Email Validation

一旦在表单中输入正确的电子邮件地址，如何摆脱错误消息？

2 个答案: