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

要求实现如下功能：

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

2、随机验证码

3、密码强度

4、加拖拽加蒙版

html代码

<div id="mask"></div>
<div id="box"><div 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></div><div 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></div>
</div>

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天免登录//设置cookiefunction setCookie(_name, val, expires) {var d = new Date();d.setDate(d.getDate() + expires);document.cookie = _name + "=" + val + ";path=/;expires=" + d.toGMTString();}//获取cookiefunction 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实现正则匹配、随机验证码、密码强度、加拖拽加蒙板相关推荐

常用正则表达式,常用表单验证javascript代码
常用正则表达式,常用表单验证javascript代码 function f_MobilCheck(as_SourceString) { if(as_SourceString.match(/^13[0 ...
视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
常用正则表达式,常用表单验证javascript代码(转)
function f_MobilCheck(as_SourceString) { if(as_SourceString.match(/^13[0-9]{9}$/g)) return true; / ...
表单验证通过输入框获取用户输入的密码，如果输入密码为“happy123”,则显示“密码输入正确”，否则提示“密码输入错误”,如果输入三次，显示提示信息“三分钟后在尝试”
功能:简单的表单验证,密码输入次数控制,定时器控制可输入提醒,密码匹配 Html:请忽略界面设计,没时间做 <form><input id="userName" ...
使用正则表达式实现注册表单验证（包括下拉列表二级联动、密码显示和隐藏）...
根据所学知识和查找网上资料所写,有错误或不足之处欢迎指正. 实现的效果如下图(网络图片)所示: 开始写代码注册html页面--先简单的利用table标签和input标签写出来(上面的图片用PS制作) ...
正则匹配：Email 密码强度身份证手机号日期数字每4个字空一格等
正则表达式,一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑.熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升.下面是在前端开发中经常 ...
html对银行卡号的表单验证,JavaScript中校验银行卡号的实现代码
1.先引入jquery.js 2.接着引入luhmCheck.js //银行卡号Luhm校验 3.看下面的案例: 无标题页下面是js function CheckBankNo(t_bankno) { ...
vue之el-form实现常用表单验证规则定义【比如:用户名、密码、身份证号、邮箱号，手机号，车牌号、ip地址等】|亲测有效，建议收藏
JavaScript 表单与表单验证
JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成. 以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则 ...

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

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

最新文章

热门文章