效验页面邮箱

来源:互联网 发布:艺考必备软件 编辑:程序博客网 时间:2024/05/21 18:36

效果:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>效验meail</title>
</head>
<body>
    <br>
            <center>
                <form>

                    邮箱地址:<input name="meail_input_name" type = "text" id="meail_input_id" value="" placeholder="请输入正确的邮箱">
                    <input name="meail_check_name" type = "button"id="meail_check_id" value="效验邮箱" onclick="checkMeail()">
                </form>
            </center>
    </br>        
</body>
<script type="text/javascript">
    function checkMeail(){
        var meailAddress=document.getElementById("meail_input_id").value;
        //长度
        var meailLength = meailAddress.length;
        //判断含有@,“.”
        var index1 = meailAddress.indexOf("@");
        var index2 = meailAddress.indexOf(".");
        var msg = "效验输入的邮箱号\n";
        msg += "@所在的索引:==:"+index1;
        msg += "'.'所在的索引:==:"+index2;
        msg +="邮箱地址:"+meailAddress+"\n";
        msg +="验证邮箱地址的实例:"
        if (index1==-1||index2==-1||index1<index2) {
            msg +="邮箱的基本要求:"+"\n";
            msg +="必须含有'@'和'.'+\n";
            msg +="'.'必须在'@'后面\n";
        }else{
            msg += "符合要求";
        };
        alert(msg);
    }

</script>
</html>

原创粉丝点击