【JavaScript】用户注册

最新推荐文章于 2024-04-26 17:21:31 发布
陈迷学习
最新推荐文章于 2024-04-26 17:21:31 发布
阅读量257
点赞数 3
文章标签： html javascript
本文链接：https://blog.csdn.net/ywftd/article/details/131719030
版权
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        em,i{
            font-style: normal;
        }
        li{
            list-style: none;
        }
        .registerarea{
            height: 580px;
            border: 1px solid #ccc;
            margin-top: 20px;
        }
        .registerarea a{
            color: #c81623;
        }
        .reg_form{
            width: 600px;
            height: 400px;
            margin: 40px auto 0;
        }
        .reg_form li{
            margin-bottom: 15px;
        }
        .reg_form label{
            display: inline-block;
            width: 100px;
            height: 36px;
            line-height: 36px;
            text-align: right;
        }
        .inp{
            width: 238px;
            height: 34px;
            border: 1px solid #ccc;
            margin-left: 10px;
        }
        .error{
            color:#df3033;
            margin-left: 10px;
        }
        .error_icon,.success_icon{
            display: inline-block;
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-top: -2px;
        }
        .success{
            color: #40b83f;
            margin-left: 10px;
        }
        .safe{
            padding-left: 187px;
            color: #b2b2b2;
        }
        .safe em{
            padding: 0 12px;
            color: #fff;
        }
        .ruo{
            background-color: #de1111;
        }
        .zhong{
            background-color: #40b83f;
        }
        .qiang{
            background-color:#f79100 ;
        }
        .agree{
            padding-top: 20px;
            padding-left: 100px;
        }
        .agree input{
            vertical-align: middle;
            margin-right: 5px;
        }
        .agree a{
            color:#1ba1e6;
        }
        .over{
            width: 200px;
            height: 34px;
            background-color: #c81623;
            margin: 20px 0 0 130px;
            border: none;
            font-size: #fff;
            font-size: 14px;
        }
        .links{
            margin-top: 20px;
            height: 30px;
        }
        .copyright{
            line-height: 20px;
        }
    </style>
</head>
<body>
    <div class="w">
        <div class="registerarea">
            <div class="reg_form">
                <form action="">
                    <ul>
                        <li>
                            <label for="tel">手机号:</label>
                            <input type="text" class="inp" id="tel">
                            <span class=""></span>                       
                        </li>
                        <li>
                            <label for="tel">QQ:</label>
                            <input type="text" class="inp" id="qq">
                            <span></span>                       
                        </li>
                        <li>
                            <label for="tel">昵称:</label>
                            <input type="text" class="inp" id="nc">
                            <span></span>                       
                        </li>
                        <li>
                            <label for="tel">短信验证码:</label>
                            <input type="text" class="inp" id="msg">
                            <span></span>                       
                        </li>
                        <li>
                            <label for="tel">登录密码:</label>
                            <input type="text" class="inp" id="pwd">
                            <span></span>                       
                        </li>
                        <li class="safe">安全程度
                            <em class="ruo">弱</em>
                            <em class="zhong">中</em>
                            <em class="qiang">强</em>                      
                        </li>
                        <li>
                            <label for="">确认密码:</label>
                            <input type="text" class="inp" id="surepwd">
                            <span></span>                       
                        </li>
                        <li class="agree">
                            <input type="checkbox">同意协议并注册<a href="#">《用户协议》</a>                       
                        </li>
                        <li><input type="submit" value="完成注册" class="over"></li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
    <script>
        window.onload=function(){
            var regtel=/^1[3|4|5|7|8]\d{9}$/;
            var regqq=/^[1-9]\d{4,}$/;
            var regnc=/^[\u4e00-\u9fa5]{2,8}$/;
            var regmsg=/^\d{6}$/;
            var regpwd=/^[a-zA-Z0-9_-]{6,16}$/;
            var tel=document.querySelector('#tel');
            var qq=document.querySelector('#qq');
            var nc=document.querySelector('#nc');
            var msg=document.querySelector('#msg');
            var pwd=document.querySelector('#pwd');
            var surepwd=document.querySelector('#surepwd');
            regexp(tel,regtel);
            regexp(qq,regqq);
            regexp(nc,regnc);
            regexp(msg,regmsg);
            regexp(pwd,regpwd);
            function regexp(ele,reg){
                ele.onblur=function(){
                    if(reg.test(this.value)){
                        this.nextElementSibling.ClassName='success';
                        this.nextElementSibling.innerHTML='<i class="success_icon"></i>恭喜您输入正确';
                    }else{
                        this.nextElementSibling.ClassName='error';
                        this.nextElementSibling.innerHTML='<i class="error_icon"></i>格式不正确,请重新输入';
                    }
                }
            };
            surepwd.onblur=function(){
                if(this.value==pwd.value){
                    this.nextElementSibling.className='success';
                    this.nextElementSibling.innerHTML='<i class="success_icon"></i>恭喜您输入正确';

                }else{
                    this.nextElementSibling.className='error';
                    this.nextElementSibling.innerHTML='<i class="error_icon"></i>两次密码输入不一样';
                }
                }
            }
    </script>
</body>
</html>