验证电子邮件地址时出现 jQuery 错误答案

【问题标题】：j Query error in validation of email address验证电子邮件地址时出现 jQuery 错误
【发布时间】：2018-05-26 13:28:31
【问题描述】：

我正在使用以下代码验证电子邮件，它在某种程度上正在工作并验证电子邮件。请帮助我。

<html>
<head>
    <script type="text/javascript" src="assets/js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="assets/js/jquery-ui.js"></script>
    <script type="text/javascript" src="assets/js/jquery.validate.js"></script>
<script>
    $(document).ready(function(){ 
        $("#button1").click(function(){
            var form = $("#form1");
            form.validate({
                rules: {
                    email: {
                        required: true,
                        email: true,
                    }, 
                },
                messages: {
                    email: {
                        required: "email field required",
                    },
                }
            });
        });
    });
</script>
</head>
<body>
    <form id="form1" value="form1" name="form">
        <label>email</label<br>
        <input name="email" type="email" placeholder="email@email.com">
        <br>
        <input id="button1" type="submit" value="SUBMIT">
    </form>
</body>
</html>

例如，如果我写 email@g 所以它必须给我一个错误但它接受这个。

【问题讨论】：

标签： jquery forms validation email

【解决方案1】：

如果我正确理解了这个问题，这就是你可以解决问题的方法。

https://jsfiddle.net/theurmzd/Lsg80776/

$(document).ready(function(){
$('#email').on('change',function(){
var regemail = /^((([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;

if($(this).val.length>3){
$('#error').html('short email');
} else if(regemail.test(email) == false){
$('#error').html('invalid email');
} else {
$('#error').html('a OK');
}
})
})

html

<p id='error'>

</p>

<input type='email' id='email' placeholder='email'>
<input type='submit' id='submit' value = 'submit'>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

--->已编辑

https://jsfiddle.net/theurmzd/vtgunors/

<html>
<head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<script>
    $(document).ready(function(){ 
        $("#button1").click(function(){
            var form = $("#form1");
            form.validate({
                rules: {
                    email: {
                        required: true,
                        email: true,
                    }, 
                },
                messages: {
                    email: {
                        required: "email field required",
                        email: "email must be valid",
                    },
                }
            });
        });
    });
</script>
</head>
<body>
    <form id="form1" value="form1" name="form">
        <label>email</label><br>
        <input name="email" type="email" placeholder="email@email.com">
        <br>
        <input id="button1" type="submit" value="SUBMIT">
    </form>

</body>
</html>

【讨论】：

亲爱的你是用 JavaScript 旧函数做的，你能告诉我上面的代码有什么问题吗？ @Urmzd S
@goharabbas 您缺少 jquery cdn 和脚本的正确来源。我编辑了我的答案。再检查一遍。经测试。注意：也修复了一些语法错误。