注册验证

最新推荐文章于 2023-03-13 18:14:23 发布

zoekitty

最新推荐文章于 2023-03-13 18:14:23 发布

阅读量555

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zoekitty/article/details/52411220

版权

javascript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/register.css"/>
    <link rel="stylesheet" href="iconfont/iconfont.css"/>
</head>
<body>
<div class="nav">
    <div class="img-center">
    <a href="main.html"><img src="img/logo.png"/></a> <strong>注册</strong>
    </div>
</div>
<div class="content">
    <div class="reg-wrap ">
        <div class="form">
            <p class="userName">
               <span class="iconfont"></span>
                <input id="userInput" type="text" placeholder="学号/教师证号"><span></span>
            </p>
            <p class="name">
                <span class="iconfont"></span>
                <input id="nameInput" type="text" placeholder="姓名"><span></span>
            </p>
            <p class="userPwd">
                <span class="iconfont"></span>
                <input id="pwdInput" type="password" placeholder="密码"><span></span>
            </p>
            <p class="confirm">
                <span class="iconfont"> </span>
                <input id="conInput" type="password" placeholder="确认密码"><span></span>
            </p>
            <p class="email">
                <span class="iconfont"></span>
                <input id="emailInput" type="text" placeholder="邮箱"><span></span>
            </p>
        </div>
        <input class="loginbtn" type="submit" value="注册" />

    </div>
</div>
</body>
<script>
    var pending = function (id,reg) {
        var inp = document.getElementById(id);
        inp.onblur = function () {
            if(reg.test(this.value)){
                this.nextSibling.innerHTML = ""; // 这个 的 下一个兄弟节点 的 内部HTML = “”
                this.nextSibling.className = "right iconfont";//
            }else{
                this.nextSibling.innerHTML = "";
                this.nextSibling.className = "wrong iconfont";
            }
        }
    };

//学号、教师证号 为两位的数字
    var regUser = /^\d{2}$/;
    /*var regMobile2 = /^(13[0-9]|14[57]|15[0-9]|18[0-9])\d{8}$/;*/
    pending("userInput",regUser);
    //姓名 2-4位
    var regName=/^[\u4e00-\u9fa5]{2,4}$/;
    pending("nameInput",regName);
    //密码 以字母开头，长度在6~18之间，只能包含字符、数字和下划线
    var regPwd=/^[a-zA-Z]\w{5,17}$/;
    pending("pwdInput",regPwd);
    //邮箱 \w+@\w+.\w+
    //barack.obama.aaa.aaaa@whitehouse.gov
    var regEmail = /^\w+@\w+\.\w+$/;
    var regEmail2 = /^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    pending("emailInput",regEmail);

    //确认密码
    var conInput=document.getElementById('conInput');
    var pwdInput=document.getElementById('pwdInput');
    conInput.οnblur=function(){
        if(regPwd.test(this.value)==true){
            this.nextSibling.innerHTML = ""; // 这个 的 下一个兄弟节点 的 内部HTML = “”
            this.nextSibling.className = "right iconfont";//
            return true;


        }else{
            this.nextSibling.innerHTML = ""; // 这个 的 下一个兄弟节点 的 内部HTML = “”
            this.nextSibling.className = "wrong iconfont";//
            return false
        }
    }

</script>
</html>

下面是css的

.nav{height:72px;margin-left:30%;}
.nav a{display:inline-block;border-right:2px solid black;margin-bottom: 20px;}
.nav strong{font-size: 27px;}
.img-center{padding-top:10px;}

/*content中间的注册区域*/
.content{background: #282828;}

.reg-wrap{background: url("../img/bgform.png") no-repeat center;height:600px;overflow: hidden;position:relative;}
.form{width:385px;height:255px;margin:0 auto;display:block;margin-top: 236px;}
.form p{width:385px;height:50px;background: #e5e7e9;border-bottom: 1px solid #bec0c2;position:relative;}
.form input{width:300px;border:0 none;outline: 0;background: #e5e7e9;line-height:20px;
    top:17px;font-size: 18px;margin-left:15px;}
.iconfont{font-size: 30px;line-height:50px;color:#b0b3b7;}
.loginbtn{width:386px;height:53px;color:white;background: #43baa9;display:block;
    margin:0 auto;outline: 0;border:0 none;cursor: pointer;border-radius: 5px;font-size: 20px;font-weight: bold;}
.wrong {
    color: red;
}

.right {
    color: green;
}