脚本宝典收集整理的这篇文章主要介绍了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代码
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,请注明来意。