Question

我的java代码：

<script type='text/javascript'>
$(document).ready(function () {
     $('#email').keyup(function() {
              var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

              if (re.test($(this).val())) {

                    $(this).css("background-color", "green");

              } else {

                    $(this).css("background-color", "red");
              }
        });
});
</script>

我的HTML：

<p><b>Email Address:</b> <input type="text" name="email_address" id="email" /> </p>

我正在寻找用户输入的实时更新类型的效果，而不是点击效果。

似乎没有任何效果，我使用类似的代码以实时方式更改其他文本框的值。对不起，如果这是一个重复的问题。

谢谢！

Answer 1

为什么不使用HTML5验证器？

<form>
  <input type="email" placeholder="me@example.com">
  <input type="submit">
</form>

来源：http://email.about.com/od/emailprogrammingtips/qt/How-To-Validate-Email-Addresses-With-Html5.htm jsfiddle：http://jsfiddle.net/aunY4/1/

Answer 2

您的示例在我的计算机上正常运行你确定你已经包含了jQuery吗？哪个版本？你在用什么浏览器？
这是我的工作代码：

<!DOCTYPE html>
<html>

<head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>

<body>
    <script type='text/javascript'>
        $(document).ready(function () {
            $('#email').keyup(function () {
                var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

                if (re.test($(this).val())) {

                    $(this).css("background-color", "green");

                } else {

                    $(this).css("background-color", "red");
                }
            });
        });
    </script>
    <p><b>Email Address:</b> 
        <input type="text" name="email_address" id="email" />
    </p>
</body>

</html>

这就是结果：

enter image description here

编辑：如果您想要一个简单的客户端验证库，我建议您使用jQuery Validation

Answer 3

唯一正确的答案是不对其进行验证。

http://davidcel.is/blog/2012/09/06/stop-validating-email-addresses-with-regex/?utm_source=buffer&utm_medium=twitter&utm_campaign=Buffer&utm_content=bufferdb46a

如何使用javascript验证电子邮件并更改文本框背景颜色

3 个答案: