JavaScript验证用户输入的电子邮箱和密码是否合法

admin管理员组

文章数量:1634952

要求

1.邮箱地址和密码均不能为空

2.密码不能少于6位

3.邮箱地址必须包含@和.

4.实现文本输入的即时提示效果，即当文本框失去焦点时，如格式不合法，提示原因

5.如果输入的邮箱地址密码均合法，则提交表单

<style type="text/css">
        body{
            font-size: 16px;
        }
        .txt{
            border: 1px solid #ccc;
            width: 160px;
        }
        h1{
            text-align: center;
        }
        #register{
            text-align: center;
        }
</style>

    <h1>验证用户输入的电子邮箱和密码是否合法</h1>
    <div id="register">
        <!-- check()的返回值如果是false，浏览器取消对onsubmit时间的默认处理 -->
        <form action="http://www.baidu" onsubmit="return check()">
            <p>
                <label for="">邮箱</label>
                <!-- 失去焦点后，验证格式，如果非法，即时提示 -->
                <input type="text" id="email" class="txt" placeholder="请输入邮箱" value="" onblur="checkEmail()">
                <span id="span-email"></span>
            </p>
            <p>
                <label for="">密码</label>
                <input type="password" id="pwd" class="txt" placeholder="请输入密码" value="" onblur="checkPwd()">
                <span id="span-pwd"></span>
            </p>
            <input type="submit" value="提交">
        </form>
    </div>

<script type="text/javascript">
        function $(id){
            //获取HTML页面中指定id的元素
            return document.getElementById(id);
        }
        function check(){
            if(checkEmail() && checkPwd()){
                return true;
            }
            return false;
        }
        function checkEmail(){
            var email=$("email").value;
            var obj=$("span-email");
            obj.innerHTML="";
            if(email==""){
                obj.innerHTML="Email地址不能为空";
                return false;
            }
            if(email.indexOf("@")==-1){
                obj.innerHTML="Email地址格式不正确，必须包含@";
                return false;
            }
            if(email.indexOf(".")==-1){
                obj.innerHTML="Email地址格式不正确，必须包含.";
                return false;
            }
            return true;
        }
        function checkPwd(){
            var pwd=$("pwd").value;
            var obj=$("span-pwd");
            obj.innerHTML="";
            if(pwd==""){
                //使用innerHTML属性设置<span>标签中的内容
                obj.innerHTML="密码不能为空";
                return false;
            }
            if(pwd.length<6){
                //使用innerHTML属性设置<span>标签中的内容
                obj.innerHTML="密码必须等于或大于6个字符";
                return false;
            }
            return true;
        }
</script>

本文标签： 电子邮箱是否合法密码用户JavaScript