找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发用户注册界面正则验证

2018-10-20 分类：教程 阅读(735) 评论(0)
web前端开发模板
html 前端开发模板

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>正则表单验证</title>
    <style media=”screen”>
        .main {
width:300px;
margin:auto;
}
.box1,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7 {
margin:10px0px;
}
.nam,
.pw1,
.pw2,
.yx,
.phone {
width:220px;
height:25px;
margin:5px0px;
}
.tips {
font-size:12px;
color:red;
display:none;
}
.zc {
width:60px;
font-size:18px;
text-align:center;
background:rgb(74,189,204);
border-radius:5px;
color:white;
}
</style>
</head>
<body>
    <div class=”main”>
        <div class=”box1″>
            <div class=”wod”>用户名:</div>
            <input class=”nam” type=”text” name=”name” value=””>
            <div class=’tips’>用户名长度在20个字符以内</div>
        </div>
        <div class=”box2″>
            <div class=”wod”>
                密码:
            </div>
            <input class=”pw1″ type=”password” name=”name” value=””>
            <div class=’tips’>请输入6-20位密码(必须有大小写及数字)</div>
        </div>
        <div class=”box3″>
            <div class=”wod”>
                确认密码:
            </div>
            <input class=”pw2″ type=”password” name=”name” value=””>
            <div class=’tips’>密码与上面输入一致</div>
        </div>
        <div class=”box4″>
            <div class=”wod”>
                邮箱:
            </div>
            <input class=”yx” type=”email” name=”name” value=””>
            <div class=’tips’>请输入电子邮件</div>
        </div>
        <div class=”box5″>
            <div class=”wod”>
                手机号:
            </div>
            <input class=”phone” type=”text” name=”name” value=””>
            <div class=”tips”>
                请输入11位手机号
            </div>
        </div>
        <div class=”box6″>
            性别:男<input class=”xb” type=’radio’ name=”name” value=”” checked> 女
            <input class=”xb” type=’radio’ name=”name” value=””>
        </div>
        <div class=”box7″>
            <button class=”zc” type=”button” name=”button”>注册</button>
        </div>
    </div>
</body>
<script type=”text/javascript”>
    var tips = document.getElementsByClassName(‘tips’);
    //用户名验证
    var nm = document.querySelector(‘.nam’);
    nm.onblur = function () {
        var nmNum = nm.value;
        var re = /^\w{6,20}$/g;
        var rez = re.test(nmNum);
        if (rez == true) {
            tips[0].style.display = ‘block’;
            tips[0].innerHTML = ‘格式正确’;
        } else if (nmNum == ”) {
            tips[0].style.display = ‘block’;
            tips[0].innerHTML = ‘用户名不能为空’;
        } else {
            tips[0].style.display = ‘block’;
            nm.value = ”;
        }
    }
    //密码验证
    var pw1 = document.querySelector(‘.pw1’);
    pw1.onblur = function () {
        var pw1Num = pw1.value;
        var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,20}$/g; //密码必须有大小写字母和数字且6-20位
        var rez = re.test(pw1Num);
        if (rez == true) {
            tips[1].style.display = ‘block’;
            tips[1].innerHTML = ‘格式正确’;
        } else if (pw1Num == ”) {
            tips[1].style.display = ‘block’;
            tips[1].innerHTML = ‘密码不能为空’;
        } else {
            tips[1].style.display = ‘block’;
        }
    }
    //确认密码验证
    var pw2 = document.querySelector(‘.pw2’);
    pw2.onblur = function () {
        if (pw2.value == pw1.value && pw2.value != ”) {
            tips[2].style.display = ‘block’;
            tips[2].innerHTML = ‘两次输入一致’;
        } else if (pw2.value == ”) {
            tips[2].style.display = ‘block’;
            tips[2].innerHTML = ‘不能为空’;
        } else {
            tips[2].style.display = ‘block’;
            tips[2].innerHTML = ‘两次输入不一致’;
            pw2.value = ”;
        }
    }
    var phone = document.querySelector(‘.phone’);
    //验证手机号码
    phone.onblur = function () {
        var phNumber = phone.value;
        var re = /1(31|32|34|35|36|37|38|39|50|57|58|86|87|88)[0-9]{8}/g;
        var wrResult = re.test(phNumber);
        if (wrResult == true && phNumber.length == 11) {
            tips[4].style.display = ‘block’;
            tips[4].innerHTML = ‘格式正确’;
        } else if (phNumber == ”) {
            tips[4].style.display = ‘block’;
        } else {
            tips[4].style.display = ‘block’;
            tips[4].innerHTML = ‘请输入正确的手机号’;
            phone.value = ”;
        }
    }
    //验证邮箱
    var yx = document.querySelector(‘.yx’);
    yx.onblur = function () {
        var yxads = yx.value;
        var reg = /^\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/g;
        var yxResult = reg.test(yxads);
        if (yxResult == true) {
            tips[3].style.display = ‘block’;
            tips[3].innerHTML = ‘格式正确’;
        } else if (yxads == ”) {
            tips[3].style.display = ‘block’;
            tips[3].innerHTML = ‘请输入邮箱地址’;
        } else {
            tips[3].style.display = ‘block’;
            tips[3].innerHTML = ‘格式不正确’;
            yx.value = ”;
        }
    }
</script>
</html>
前端开发者公众号
前端早开发 公众号
公众号前端开发难度
赞(0)
前端开发者 » 前端开发用户注册界面正则验证
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论