表单验证JavaScript实现正则匹配、随机验证码、密码强度、加拖拽加蒙板

要求实现如下功能：

     1、正则匹配用户名  邮箱  密码  手机号

     2、随机验证码   

     3、密码强度

     4、加拖拽 加蒙版

html代码

    

        
账户详细资料
        用户名称 

        登录密码 

        重复登录密码 

        密码安全级别
    
    

        
个人信息资料
        电子邮件 

        真实姓名 

        中奖通知手机 

        验证码 

        注册
        10天内免登录
    

css代码

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ::selection {
            background: none;
        }

        #mask {
            background: #000;
            opacity: 0.5;
            display: none;
            position: absolute;
        }

        #box {
            position: absolute;
            top: 100px;
            left: 35%;
        }

        .box1 {
            width: 400px;
            height: 200px;
            background: #333;
            color: #c6ced2;
            font-size: 12px;
        }

        .box1 > p {
            color: #157fbd;
            font-weight: bold;
            margin-bottom: 25px;
            font-size: 14px;
        }

        #Drag {
            height: 29px;
            margin-bottom: 15px;
        }

        .box1 > span {
            display: inline-block;
            margin-left: 27px;
            margin-bottom: 20px;
        }

        .box1 > input {
            background: #999;
            width: 202px;
            height: 21px;
            border: 1px solid #6e6e6e;
            border-radius: 3px;
            float: right;
        }

        .box1 > i {
            display: inline-block;
            width: 156px;
            height: 21px;
            background: #e4e4e4;
            margin-left: 20px;
        }

        .box1 > i > b {
            display: inline-block;
            width: 156px;
            height: 21px;
            /*background: #009900;*/
            float: right;
            text-align: center;
            font-style: normal;
            padding-top: 3px;
            font-weight: normal;
            color: #000;
        }

        .box1 > b {
            display: inline-block;
            width: 80px;
            height: 21px;
            float: right;
            font-size: 10px;
            margin-top: 3px;
            vertical-align: middle;
        }

        .registered {
            height: 240px;
        }

        .registered > input:nth-of-type(4) {
            display: inline-block;
            width: 70px;
            float: none;
            margin-left: 52px;
        }

        button {
            width: 88px;
            height: 31px;
            background: #2c67b5;
            border: 1px solid #7c7b79;
            margin-left: 130px;
        }

        #chec {
            display: inline-block;
            width: 13px;
            height: 13px;
            float: none;
            margin-left: 5px;
            margin-right: 3px;
            vertical-align: middle;
        }

        #lastb {
            float: none;
        }

        #vcode {
            float: none;
            display: inline-block;
            width: 70px;
            height: 20px;
            margin-left: 10px;
            background: #fff;
            margin-top: 0;
            text-align: center;
            padding-top: 3px;
            color: #000;
        }

JS代码

 var Box = document.getElementById("box");
    var Drag = document.getElementById("Drag");
    var Mask = document.getElementById("mask");
    var iw = document.documentElement.clientWidth - Box.offsetWidth;

    var iw1 = document.documentElement.clientWidth;
    var iH = document.documentElement.clientHeight;

    var user = document.getElementById("username");
    var passw = document.getElementById("password");
    var passw1 = document.getElementById("password1");
    var email = document.getElementById("email");
    var phone = document.getElementById("phone");

    var oBtn = document.getElementById("btn");
    var oCheck = document.getElementById("chec");
    var strength = document.querySelector(".strength");
    var vcode = document.getElementById("vcode");

    // 验证用户名
    user.onblur = function () {
        if (/^[a-zA-Z]\w{5,15}$/.test(user.value)) {
            this.previousElementSibling.innerHTML = "√用户名可用！";
            this.previousElementSibling.style.color = "#009900";
        } else {
            this.previousElementSibling.innerHTML = "×用户名不可用！";
            this.previousElementSibling.style.color = "red";
        }
    };
    // 验证密码
    passw.onblur = function () {
        if (/^[a-zA-Z]\w{5,15}$/.test(passw.value)) {
            this.previousElementSibling.innerHTML = "√密码可用！";
            this.previousElementSibling.style.color = "#009900";
        } else {
            this.previousElementSibling.innerHTML = "×密码不可用！";
            this.previousElementSibling.style.color = "red";
        }
      
        // 密码强度
        if (/^\d+$/.test(passw.value) || /^[a-zA-Z]+$/.test(passw.value)) {
            strength.innerHTML = "弱";
            strength.parentNode.style.background = "red";
        } else if (/^[a-zA-Z][a-zA-Z\d]+$/.test(passw.value)) {
            strength.innerHTML = "中";
            strength.parentNode.style.background = "#eee022";
        } else if (/^[a-z]\w+$/.test(passw.value)) {
            strength.innerHTML = "高";
            strength.parentNode.style.background = "#009900";
        }
    };
    // 验证重复密码
    passw1.onblur = function () {
        if (new RegExp(passw.value).test(passw1.value)) {
            this.previousElementSibling.innerHTML = "√密码可用！";
            this.previousElementSibling.style.color = "#009900";
        } else {
            this.previousElementSibling.innerHTML = "×密码不一致！";
            this.previousElementSibling.style.color = "red";
        }
    };
    // 验证邮箱
    email.onblur = function () {
        if (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email.value)) {
            this.previousElementSibling.innerHTML = "√邮箱可用！";
            this.previousElementSibling.style.color = "#009900";
        } else {
            this.previousElementSibling.innerHTML = "×邮箱不可用！";
            this.previousElementSibling.style.color = "red";
        }
    };
    // 验证手机号
    phone.onblur = function () {
        if (/^1[3|4|5|7|8][0-9]{9}$/.test(phone.value)) {
            this.previousElementSibling.innerHTML = "√手机号可用！";
            this.previousElementSibling.style.color = "#009900";
        } else {
            this.previousElementSibling.innerHTML = "×手机号不可用！";
            this.previousElementSibling.style.color = "red";
        }
    };

    // 设置验证码
    vcode.innerHTML = vCode();

    // 数字字母混合验证码(4位)
    function vCode() {
        var str = "";
        for (var i = 0; i < 4; i++) {
            var num = parseInt(48 + Math.random() * (122 - 47));
            while ((num >= 58 && num <= 64) || (num >= 91 && num <= 96)) {
                num = parseInt(48 + Math.random() * (122 - 47))
            }
            var char = String.fromCharCode(num);
            str += char;
        }
        return str;
    }

    vcode.previousElementSibling.style.textAlign = "center";
    vcode.previousElementSibling.style.fontSize = "12px";
    vcode.nextElementSibling.style.float = "none";
    vcode.nextElementSibling.style.marginLeft = "5px";

    // 验证验证码
    vcode.previousElementSibling.onblur = function () {
        if (new RegExp(vcode.innerHTML).test(this.value)) {
            vcode.nextElementSibling.innerHTML = "√";
            vcode.nextElementSibling.style.color = "#009900";
        } else {
            vcode.nextElementSibling.innerHTML = "×";
            vcode.nextElementSibling.style.color = "red";
        }
    };
    // 点击更换验证码
    vcode.onclick = function () {
        vcode.innerHTML = vCode();
    };

    // 拖拽
    Drag.onmousedown = function (e) {
        var e = e || event;

        var disX = e.offsetX;
        var disY = e.offsetY;
        document.onmousemove = function (e) {
            var e = e || event;
            var l = e.clientX - disX;
            var t = e.clientY - disY;
            l = l >= iw ? l = iw : (l <= 0 ? l = 0 : l = l);
            t = t >= e.clientY ? t = e.clientY : (t <= 0 ? t = 0 : t = t);
            Box.style.left = l + "px";
            Box.style.top = t + "px";
        };
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    };

    // 蒙板
    Mask.style.width = iw1 + 'px';
    Mask.style.height = iH + 'px';
    document.onclick = function () {
        Mask.style.display = "block";
    };

    // 10天免登录
    //设置cookie
    function setCookie(_name, val, expires) {
        var d = new Date();
        d.setDate(d.getDate() + expires);
        document.cookie = _name + "=" + val + ";path=/;expires=" + d.toGMTString();
    }

    //获取cookie
    function getCookie(_name) {
        var cookie = document.cookie;
        var arr = cookie.split("; ");
        for (var i = 0; i < arr.length; i++) {
            var newArr = arr[i].split("=");
            if (newArr[0] == _name) {
                return newArr[1];
            }
        }
    }

    if (getCookie("init")) {
        var cookie = JSON.parse(getCookie("init"));
        user.value = cookie.name;
        passw.value = cookie.pass;
        oCheck.checked = true;
    }
    oBtn.onclick = function () {
        if (oCheck.checked) {
            var obj = {};
            obj.name = user.value;
            obj.pass = passw.value;
            var str = JSON.stringify(obj);
            setCookie("init", str, 10);
        }
    }