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

Posted 知了乐了

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于web前端 Javascript实现邮箱的简单验证的主要内容，如果未能解决你的问题，请参考以下文章

网站前端_JavaScript.0001.JavaScript简单概述

融职教育Web前端学习 第3章 JavaScript基础教程10 正则表达式

JavaScript 简单介绍

前端模块化

web前端的javascript主要用于交互吗

模块化开发