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

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

要求实现如下功能：

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

2、随机验证码

3、密码强度

4、加拖拽 加蒙版

html代码

<p id="mask"></p>  
<p id="box">  
    <p class="box1">  
        <p id="drag">账户详细资料</p>  
        <span>用户名称</span> <b></b><input type="text" id="username"><br>  
        <span>登录密码</span> <b></b><input type="password" id="password"><br>  
        <span>重复登录密码</span> <b></b><input type="password" id="password1"><br>  
        <span>密码安全级别</span><i><b class="strength"></b></i>  
    </p>  
    <p class="box1 registered">  
        <p>个人信息资料</p>  
        <span>电子邮件</span> <b></b><input type="text" id="email"><br>  
        <span>真实姓名</span> <b></b><input type="text"><br>  
        <span>中奖通知手机</span> <b></b><input type="text" id="phone"><br>  
        <span>验证码</span> <input type="text"><b id="vcode"></b><b></b><br>  
        <button id="btn">注册</button>  
        <input type="checkbox" id="chec"><b id="lastb">10天内免登录</b>  
    </p>  
</p>  

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);  
       }  
   }  

如对本文有疑问， 点击进行留言回复！！