Question

这不是特别关于如何构建电子邮件验证表单。我找到了这段代码： http://jsfiddle.net/jquery4u/5rPmV/

dyingOverHere();

你可以看到它完美运作。我试图在我的网站中实现同样的事情，但由于某种原因没有显示文本。应该出现在电子邮件中输入框旁边的那个有效或无效。我开始只是以我自己的形式修改一些东西，最后将Jsfiddle中的确切代码粘贴到我的文件中，但它仍然无法正常工作。我正在使用Mozzila FireFox。我也试过Chrome，我也得到了相同的结果。我错过了什么？

Answer 1

由于您尚未发布已修改的代码，因此我假设以下内容：

您可能未包含jQuery library
您尚未将代码包装在DOM ready函数中

解决方案：

你必须像这样包含jquery库：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

然后你必须将所有jQuery代码包装在就绪函数中，如下所示：

<script type="text/javascript">

    $(document).ready(function(){

         $('form input[name="email"]').blur(function () {
             var email = $(this).val();
             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,}))$/igm;
             if (re.test(email)) {
                $('.msg').hide();
                $('.success').show();
             } else {
                $('.msg').hide();
                $('.error').show();
             }

         });



    });
</script>

Answer 2

检查您是否包含了jQuery库。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

在Chrome中打开开发者工具，使用Ctrl + Shift + I（或Mac上的Cmd + Opt + I）打开。如果您有任何错误，请从那里检查控制台选项卡。

Answer 3

您可以使用HTML5属性：

<input type="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">

HTML5 Email Validation

简单的电子邮件验证表完全糊涂了

3 个答案: