【Javascript】入门之验证注册信息

描述:

html

 <main class="clearfix">
        <div class="leftpanel fl">
            <form action="#" id = "registerform">
                <div>
                   <span>手机: </span>
                   <input type="text" name="username" id="username" placeholder="请输入手机号" autocomplete="off">
                   <em></em>
                </div>
                <div>
                    <span>创建密码: </span>
                    <input type="password" name="password" id="password" placeholder="请输入密码" autocomplete="off">
                    <em></em>
                 </div>
                 <div>
                    <span>确认密码: </span>
                    <input type="password" name="confirmpassword" id="confirmpassword" placeholder="请再次输入密码" autocomplete="off">
                    <em></em>
                 </div>
                 <div class="verify clearfix">
                    <div class="verifylabel fl">验证码: </div>
                    <div class="verificationbox fl">
                        <input type="text" name="verification" id="verification" placeholder="请输入验证码" autocomplete="off">
                        <span id="code"></span>
                    </div>
                    <em></em>
                 </div>
                 <div class="verify clearfix">
                    <div class="verifylabel fl">短信验证: </div>
                    <div class="verificationbox fl">
                        <input type="text" name="message" id="message" placeholder="请输入验证码" autocomplete="off">
                        <a id="getmessage" href="#">免费获取短信</a>
                    </div>
                    <em></em>
                 </div>
                 <button type="submit" value="注册" id = "register" name = "register">注册</button>
                 <p class="hint">
                     已有账号, 请<a href="./login.html">登录</a>
                 </p>
            </form>
        </div>
        <div class="desc fl">
                <h4>用户专享服务：</h4>
                极致的视频学习体验<br>
                丰富的直播课程免费学<br>
                开课提醒，不错过每一次精彩<br>
                讲、学、练、考，多种高效学习方式快速提升成绩<br>
        </div>
    </main>

CSS

main .leftpanel{
    display: inline-block;
    width: 5.3rem;
    height: 3.5rem;
    border-right: .01rem  solid #E7E7E7;
    margin: .6rem 0 0 1.8rem;
}
main .leftpanel > form > div{
    padding-bottom: .15rem;
}
main .leftpanel > form > div > span{
    display: inline-block;
    width: .7rem;
    height: .16rem;
    font:.14rem/.16rem "宋体";
    text-align: right;
}
main .leftpanel > form > div > input{
    width: 2.6rem;
    height: .35rem;
    box-sizing: border-box;
    border:.01rem solid #E7E7E7;
    margin: 0 .05rem;
    text-indent: .03rem;
    color:#9999B3;
}
main .leftpanel > form > div > em{
    font: .12rem/1 "宋体";
}
main .leftpanel  form  .verify .verifylabel{
    width: .7rem;
    height: .35rem;
    font:.14rem/.35rem "宋体";
    text-align: right;
}

main .leftpanel  form  .verify .verificationbox{
    width: 2.6rem;
    height: .35rem;
    box-sizing: content-box;
    border:.01rem solid #E7E7E7;
    margin-left: .08rem;
    display: flex;
}
main .leftpanel  form  .verify .verificationbox > input{
    flex: 4;
    height: 100%;
    box-sizing: border-box;
    text-indent: .03rem;
    color:#9999B3;
}
main .leftpanel  form  .verify .verificationbox #code{
    flex: 1;
    height: 100%;
    color: #2040A0;
    background-color: #ffffff;
    font: .2rem/.35rem "Arial";
    padding:0 .1rem;
}
main .leftpanel  form  .verify .verificationbox #getmessage{
    flex: 2;
    height: 100%;
    color: #333333;
    font: .12rem/.35rem "宋体";
}
main .leftpanel  form  .verify .verificationbox #getmessage:hover{
    color: #FF4A00;
}
main .leftpanel  form  .verify > em{
    display: inline-block;
    /* width: .7rem; */
    height: .35rem;
    font:.12rem/.35rem "宋体";
    padding-left: .08rem;
}
main .leftpanel > form > #register{
     width: 2.6rem;
     height: .4rem;
     color: #ffffff;
     background-color: #FF4A00;
     margin-left: .75rem;
     cursor: pointer;
     font-weight: bold;
}
main .leftpanel > form > .hint{
    margin: .15rem 0 0 2.4rem;
    color: #666666;
}
main .leftpanel > form > .hint > a{
    color: #FF4A00;
    text-decoration: underline;
}
main .desc{
    font: 14px/30px "宋体";
    margin: .6rem 0 0 1.1rem;
    color: #666666;
}
main .desc > h4{
    color: #333333;
}

Javascript

window.onload = function () {
    
    /* 
      	Register verification
    */
    // Get form and em

    var registerForm = document.getElementById('registerform');
    var marks = registerForm.getElementsByTagName('em');
    // console.log(marks);
    // flag: true info right, flag:false info wrong
    var flag = true;
    // Get username 
    var username = registerform.username;
    // console.log(username);
    // phone regExp
    var userReg = /^1[3-9]\d{9}$/;

    judgeNull(username, marks[0], '请输入手机!');

    username.onchange = function () {
        // change color
        marks[0].style.color = '#FF6600';
        // judge regExp
        // if it is the wrong value
        if (!userReg.test(this.value)) {
            marks[0].innerHTML = '账号格式不正确!'
            flag = false;
        }
        else {
            marks[0].innerHTML = '<i class = "iconfont icon-dui1"></i>';
            flag = true;
        }
    }

    // Get password
    var password = registerForm.password;
    // console.log(password);

    judgeNull(password, marks[1], '请输入密码!');

    // password reg can be classified into low medium and high
    // low version: all number or all alphabets
    var lowReg = /^\d{6,18}$|^[a-zA-Z]{6,18}$/;
    // medium version: number + alphabets, first is letter
    var mediumReg = /(?!^[a-zA-Z]{6,18}$)^[a-zA-Z][0-9a-zA-Z]{5,17}$/;
    // high version: number + alphabets + symbols, first is letter
    var highReg = /(?!^[!@#$%^&*()_+-=]{6,18}$)(?!^\d{6,18}$)(?!^[a-zA-Z]{6,18}$)^[a-zA-Z][0-9a-zA-Z!@#$%^&*()_+-=]{5,17}$/;

    password.onchange = function () {
        // change color
        marks[1].style.color = '#ff6600';
        // first judge the length
        if (password.value.length < 6 || password.value.length > 18) {
            marks[1].innerHTML = '密码应该为6-20位之间!'
            flag = false;
        }
        // Judge three version of password
        if (lowReg.test(this.value)) {
            marks[1].innerHTML = '低';
            flag = true;
        } else if (mediumReg.test(this.value)) {
            marks[1].innerHTML = '中';
            flag = true;
        } else if (highReg.test(this.value)) {
            marks[1].innerHTML = '高';
            flag = true;
        } else {
            marks[1].innerHTML = '密码格式不正确!';
            flag = false;
        }
    }

    // Get confirmpassword
    var confirmPassword = registerForm.confirmpassword;
    // console.log(confirmPassword);

    judgeNull(confirmPassword, marks[2], '请再次输入密码!')

    // judge whether confirmPassword equals to password
    judgeEqual(confirmPassword, password, marks[2], '与原密码不一致!');
    // get verification
    var verification = registerForm.verification;
    // console.log(verification);
    // get random number button
    var randomCode = document.getElementById('code');
    // console.log(randomCode);
    var newCode = getRandomCode(5);
    randomCode.innerHTML = newCode;
    verificationEqual(verification, newCode, marks[3], '验证码错误!');
    // When click the randomCode button, generate new code
    randomCode.onclick = function () {
        newCode = getRandomCode(5);
        this.innerHTML = newCode;
        verificationEqual(verification, newCode, marks[3], '验证码错误!');
    }

    judgeNull(verification, marks[3], '请输入验证码!');

    // get message, getmessage
    var message = document.getElementById('message');
    var getMessage = document.getElementById('getmessage');
    // console.log(message);
    getMessage.onclick = function () {
        // get random random code
        var messageCode = getRandomCode(6);
        alert(messageCode);
        // judgeEqual(message, messageCode, marks[4],'验证码不正确!');
        verificationEqual(message, messageCode, marks[4], '验证码错误!');
    }
    judgeNull(message, marks[4], '请输入验证码!');

    /* 
     Store user data into local storage
    */
    // Determine whether the user array exists in the current cache.
    // If there is no array, create an array to store the data source

    var userArr = [];
    if (!localStorage.userArr) {
        // use not exist, create userArr in cache
        localStorage.userArr = JSON.stringify(userArr);
    } else {
        // user exists, save existed user information
        userArr = JSON.parse(localStorage.userArr);
    }
    // console.log(localStorage);
    // console.log(userArr);

    // Get register button
    // var registerButton = registerForm.register;
    // console.log(registerButton);


    registerForm.onsubmit = function(){
        // If all the verification passes, user info correct
        // console.log(flag);
        if(!flag) {
            alert('注册失败!');
            return false;
        }
        // register user
        var username = registerForm.username.value;
        var password = registerForm.password.value;
        // console.log(username, password);

        // save data -- as array 
        var userInfo = {
            username: username,
            password: password
        }
        // console.log(userInfo.username);

        // judge whether the user has registered
        // Traverse array to find whether to register
        for(var i = 0; i < userArr.length; i++){
            // console.log(userArr[i]);
            if(userArr[i].username == userInfo.username){
                alert('用户已注册, 请直接登录! 如果忘记密码, 请修改密码!');
                window.location = './login.html';
                return false;
            }
        }
        // alert register succeed
        alert('注册成功, 去登录');
        // User has not been registered, register account
        userArr.push(userInfo);
        // console.log(userArr);

        // Save userInfo into cache
        localStorage.userArr = JSON.stringify(userArr);
        // console.log(localStorage);
        // jump to login page
        window.location = './login.html';
        // prevent submit event
        return false;
    }

    function judgeNull(name, mark, content) {
        name.onblur = function () {
            // if the value is '' 
            // console.log(username.value);
            if (this.value == '') {
                mark.innerHTML = content;
                mark.style.color = '#999999';
                flag = false;
            }
        }
    }

    function judgeEqual(pre, next, mark, content) {
        pre.onchange = function () {
            // change color
            mark.style.color = '#ff6600';

            if (this.value != next.value) {
                mark.innerHTML = content;
            } else {
                mark.innerHTML = '<i class = "iconfont icon-dui1"></i>';
            }
        }
    }

    function verificationEqual(pre, next, mark, content) {
        pre.onchange = function () {
            mark.style.color = '#ff6600';
            if (this.value != next) {
                mark.innerHTML = content;
                flag = false;
            } else {
                mark.innerHTML = '<i class = "iconfont icon-dui1"></i>';
                flag = true;
            }
        }
    }

    function getRandomCode(n) {
        // n: the digit that we want
        var str = '0123456789';
        // save random code
        var s = '';
        for (var i = 0; i < n; i++) {
            var num = Math.floor(Math.random() * str.length);
            s = s + str[num];
        }
        return s;
    }

}