web前端 Javascript实现邮箱的简单验证

 我们这里对输入的字符串先设定邮箱的验证规则，一个比较弱的验证规则：它需要包含“@”、“.”符号，并且“@”符号之前必须要有至少1个字符，“@”和“.”也必须有至少1个字符，“.”后面至少有2个字符。如果验证错误，在后面输出红色的错误提示；如果验证正确，输出绿色的正确提示。代码实现如下：

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<head>

</head>
<body>
    <label>email:</label><input type="text" id="email"/>
    <input type="button" value="验证" onclick="checkemail()" />
    <span id="message"></span>
</body>
<script type="text/javascript">
    
    function checkemail() {
        var obj = document.getElementById("email");
        if(obj.value != ""){
            var str = obj.value;
            if(str.indexOf("@") != -1 && str.indexOf(".") != -1){
                var a = str.split("@");
                if(a[0].length > 0){
                    if(a[1].length > 0){
                        var b = a[1].split(".");
                        if(b[0].length > 0){
                            if(b[1].length > 1){
                                document.getElementById("message").innerHTML = "<font color='green'>正确</font>";
                            }
                            else{
                                document.getElementById("message").innerHTML = "<font color='red'>错误，.后面必须要有至少2个字符！！！</font>";
                            }
                        }
                        else{
                            document.getElementById("message").innerHTML = "<font color='red'>错误，@和.之间必须要有至少1个字符！！！</font>";
                        }
                    }
                    else{
                        document.getElementById("message").innerHTML = "<font color='red'>错误，@后面必须要有至少1个字符！！！</font>";
                    }
                }
                else{
                    document.getElementById("message").innerHTML = "<font color='red'>错误，@前面必须要有至少1个字符！！！</font>";
                }
            }
            else{
                document.getElementById("message").innerHTML = "<font color='red'>错误，邮箱需要包含@和.字符！！！</font>";
            }
        }
    }

</script>

</html>
posted @ 2018-01-22 09:47  知了乐了  阅读(1466)  评论(0)  编辑  收藏  举报