【web初步】简单的登入注册界面

在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div>
    <form method="post" action="" onsubmit="return xc.regCheck();" >
        <input type="hidden" name="" id="errnum" value="0">
        name: <input type="text" name="" id="name"><br>
        sex: <input type="radio" value="1" checked="checked">
        sex: <input type="radio" value="0" >
        <br>
        age: <select name="" id="age">
        <option value="0" selected="selected">xz</option>
        <option value="1">0~18</option>
        <option value="2">18~24</option>
        <option value="2">25~30</option>
        <option value="2">31~35</option>
        <option value="5">35~</option>
    </select>
        <br>
        like: <input type="checkbox" name="like" value="1" class="like" hidden="hidden">
        <br>
        a<input type="checkbox" name="like" value="1" class="like">
        b<input type="checkbox" name="like" value="2" class="like">
        c<input type="checkbox" name="like" value="3" class="like">
        <br>
        pass: <input type="password" id="pass"><br>
        repass: <input type="password" id="repass"><br>
        about: <textarea name="" id="about" cols="18" rows="4"></textarea>
        <input type="submit" value="login" id="regBtn">
        <input type="button" value="解锁" onclick="xc.unlock()"
               id="regUnlock" style="display:none;">
    </form>
</div>

<script>
    var xc={};
    xc.$=function (id) {
        return document.getElementById(id);

    };
    xc.regCheck=function () {
        var name=xc.$('name');
        var upass=xc.$('pass');
        var rpass=xc.$('repass');
        if (name.value===''){
            alert('not null');
            xc.err();
            return false;
        }
        if (upass.value===''){
            alert('pass null');
            xc.err();
            return false;
        }
        if (upass.value!==rpass.value){
            alert('not same');
            xc.err();
            return false;
        }
        var about=xc.$('about');
        if (about.value.length>60){
            alert('To long');
            xc.err();
            return false;
        }

        var age=xc.$("age");
        if (age.value==="0"){
            alert("age");
            return false;
        }


        var likes =document.getElementsByClassName("like");
        var likeNum=0;
        for (var n=0;n<likes.length;n++){
            if (likes[n].checked){
                likeNum++;
            }
        }
        if (likeNum===0){
            alert("like");
            xc.err();
            return false;
        }
        return true;

    };

    xc.err=function(){
        var el=xc.$("errnum");
        var old=el.value;
        el.value=parseInt(old)+1;
        console.log(el);
        xc.lock();
    };

    xc.lock=function(){
        var err=xc.$("errnum");
        if (parseInt(err.value)>2){
            xc.$("regBtn").disabled=true;
            xc.$("regUnlock").style.display="block";
        }
    };

    xc.unlock=function () {
        xc.$("regBtn").disabled=false;
        xc.$("regUnlock").style.display="none";

    };
</script>

</body>
</html>
xcdq
发布了137 篇原创文章 · 获赞 18 · 访问量 4739
私信关注
【web初步】简单的登入注册界面

猜你喜欢
