简易表单验证

1.页面结构与获取元素

<div class="box">
        用户名：<input type="text" class="username"><br>
        <span class="user_span"></span>
        密&emsp;码：<input type="password" class="password"><br>
        <span class="password_span"></span>
        手机号：<input type="text" class="telphone"><br>
        <span class="telphone_span"></span>
        邮&emsp;箱：<input type="text" class="email"><br>
        <span class="email_span"></span>
        <button class="register">注册</button>
        <button class="cancel">取消</button>
</div>

    const ht = document.documentElement;
    const userInp = document.querySelector(".username");
    const userSpan = document.querySelector(".user_span");
    const pwdInp = document.querySelector(".password");
    const pwdSpan = document.querySelector(".password_span");
    const telInp = document.querySelector(".telphone");
    const telSpan = document.querySelector(".telphone_span");
    const emailInp = document.querySelector(".email");
    const emailSpan = document.querySelector(".email_span");
    const register = document.querySelector(".register");

2.用户名

//用户名由数字、大小写字母和下划线组成，6-12位且不以数字开头
        userInp.onblur = userInp.oninput = function () {
        	let falg1;
            let username = userInp.value;
            let userReg = /^[a-zA-Z]\w{5,11}$/;
            if (userReg.test(username)) {
                userSpan.style.color = "green";
                userSpan.style["font-size"] = "10px";
                userSpan.innerText = "＜（＾－＾）＞";
                falg1 = true;
            } else {
                userSpan.innerText = "用户名由数字、大小写字母和下划线组成，6-12位且不以数字开头";
                userSpan.style.color = "red";
                userSpan.style["font-size"] = "10px";
            }
        }

3.密码

//密码由数字、大小写字母组成6-12位

        pwdInp.onblur = pwdInp.oninput = function () {
            let falg2;
            let password = pwdInp.value;
            let pwdReg = /^[0-9A-z]{6,12}$/;
            if (pwdReg.test(password)) {
                pwdSpan.style.color = "green";
                pwdSpan.style["font-size"] = "10px";
                pwdSpan.innerText = "＜（＾－＾）＞";
                falg2 = true;
            } else {
                pwdSpan.innerText = "密码由数字、大小写字母组成6-12位";
                pwdSpan.style.color = "red";
                pwdSpan.style["font-size"] = "10px";
            }

        }

4.手机号

//手机号码以1开头[35789]
        telInp.onblur = telInp.oninput = function () {
            let falg3;
            let telphone = telInp.value;
            let telRge = /^1[3-9][0-9]{9}$/;
            if (telRge.test(telphone)) {
                telSpan.style.color = "green";
                telSpan.style["font-size"] = "10px";
                telSpan.innerText = "＜（＾－＾）＞";
                falg3 = true;
            } else {
                telSpan.innerText = "请输入正确的电话号码";
                telSpan.style.color = "red";
                telSpan.style["font-size"] = "10px";
            }
        }

5.邮箱

 emailInp.onblur = emailInp.oninput = function () {
        let falg4;
        let email = emailInp.value;
        let emailReg = /^\w{3,}@[A-z0-9]+\.[A-z]{2,5}$/;
        if (emailReg.test(email)) {
            emailSpan.style.color = "green";
            emailSpan.style["font-size"] = "10px";
            emailSpan.innerText = "＜（＾－＾）＞";
            falg4 = true;
        } else {
            emailSpan.innerText = "请输入正确的邮箱格式，例：tlbyxzcx@163.com";
            emailSpan.style.color = "red";
            emailSpan.style["font-size"] = "10px";
        }
    }

6.跳转

register.onclick = function () {
            if (falg1 && falg2 && falg3 && falg4)
                window.open("login.html");
        }

7.每次加载页面显示不同颜色

window.onload = function () {
            let r = Math.round(Math.random() * 255);
            let g = Math.round(Math.random() * 255);
            let b = Math.round(Math.random() * 255);
            ht.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
        }

8.效果图