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

发布时间:2018-12-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了js实例教程-表单验证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代码&nbsp;

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

表单验证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);          }      }  

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-表单验证JavaScript代码实现正则匹配、随机验证码、密码强度、加拖拽加蒙板全部内容,希望文章能够帮你解决js实例教程-表单验证JavaScript代码实现正则匹配、随机验证码、密码强度、加拖拽加蒙板所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。