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

时间：2018-01-22 11:05:58 阅读：1749 评论：0 收藏：0 [点我收藏+]

标签：oct size var div family 设定比较 html XML

我们这里对输入的字符串先设定邮箱的验证规则，一个比较弱的验证规则：它需要包含“@”、“.”符号，并且“@”符号之前必须要有至少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>

标签：oct size var div family 设定比较 html XML

原文地址：https://www.cnblogs.com/zhilelele/p/8327634.html

踩

(0)

(1)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行