j验证电子邮件地址时查询错误

时间:2017-12-12 19:01:36

标签: jquery forms validation email

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

<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>

例如,如果我写电子邮件@ g所以它必须给我一个错误,但它接受这个。

1 个答案:

答案 0 :(得分:0)

如果我正确理解了这个问题,那就是你可以采取的措施来解决问题。

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>

---&GT;编辑&lt; ----

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>