分享JS表单验证源码(带错误提示及密码等级)
程序员文章站
2024-01-02 11:59:16
先晒图
index.html
<...
先晒图
index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- 头部 --> <header> <div class="header-wrap"> <!-- 左侧 --> <div class="header-left"> <div class="logo"> <img src="img/logo.png"> </div> <div class="logo-text"> <span class="strong">xx高铁客户服务中心 | </span> <span>客户服务</span> </div> </div> <div class="header-right"> <span>意见反馈 <a href="#">test@com</a></span> <span>您好,请<a href="#"> 登录</a> | <a href="#">注册</a></span> <div class="show-nav"> <a href="#"> 我的xx <img src="img/arrow.png"> </a> <div class="hide_nav"> <ul> <li class="first-li">未完成订单</li> <li>已完成订单(改/退)</li> <li class="line">我的保险</li> <li class="line">查勘个人信息</li> <li>账户安全</li> <li class="line">常用联系人</li> <li class="line">重点旅客预约</li> <li>遗失物品寻找</li> <li class="line">服务查询</li> <li class="line">投诉</li> <li>建议</li> </ul> </div> </div> <span class="phone"> <img src="img/phone.png"> <a href="#">手机版</a> </span> </div> </div> </header> <!-- 主体部分 --> <div class="content"> <p class="title"> <span class="strong">您现在的位置:</span> <span>客运首页 > 注册</span> </p> <div id="total"> <div id="title">账户信息</div> <div class="item"> <span class="important">*</span> <label for="useraccount">用 户 名 :</label> <input type="text" id="useraccount" placeholder=" 用户设置成功后不可修改"> <span class="item_">6-30位字母、数字或“_”,字母开头</span> </div> <div class="item" style="margin-bottom: -28px;"> <span class="important">*</span> <label for="userpass">登陆密码 :</label> <input type="password" id="userpass" placeholder=" 6-20位字母、数字或符号" style="top: 15px;"> <span id="first"></span> <span id="second"></span> <span id="third"></span> <span class="item_" style="display: block;margin-top: 39px;margin-left: 161px;"></span> </div> <div class="item"> <span class="important">*</span> <label for="userpass_">确认密码 :</label> <input type="password" id="userpass_" placeholder=" 再次输入您的登录密码"> <span class="item_"></span> </div> <div class="item"> <span class="important">*</span> <label for="username">姓 名 :</label> <input type="text" id="username" placeholder=" 请输入姓名"> <span class="item_" id="show_div"><a href="#" class="line">姓名填写规则</a></span> <div class="hide_div"> <p>1.确认姓名中生僻字无法输入时,可用生僻字拼音或同音字替代。<br> 2.输入姓名保存后,遇有系统无法正确显示的汉字,可用该汉字的拼音或同音字重新修改后保存。<br> 3.姓名中有繁体字无法输入时,可用简体替代。<br> 4.姓名较长,汉字与英文字符合计超过30个(1个汉字算2个字符)的,需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符(空格字符不输入),其中英文字符输入时不区别大小写 </p> </div> </div> <div class="item"> <span class="important">*</span> <label for="idinfo">身份证号 :</label> <select name="idinfo" id="idinfo"> <option value="" selected="selected">二代身份证</option> <option value="">港澳通行证</option> <option value="">*通行证</option> <option value="">护照</option> </select> </div> <div class="item" style="margin-top: 51px;"> <span class="important">*</span> <label for="information">证件号码 :</label> <input type="text" id="information" placeholder=" 请输入您的证件号码"> <span class="item_"></span> </div> <div class="item"> <span class="important">*</span> <label for="email">邮 箱 :</label> <input type="email" id="email" placeholder="请输入正确邮箱格式"> <span class="item_"></span> </div> <div class="item"> <span class="important">*</span> <label for="telephone">手机号码 :</label> <input type="tel" id="telephone" placeholder=" 请输入您的手机号码"> <span class="item_">请正确填写手机号码,稍后将向该手机号码发送短信验证码</span> </div> <div class="item"> <span class="important">*</span> <label for="curtomer">旅客类型 :</label> <select name="curtomer" id="curtomer"> <option value="" selected="selected">成人</option> <option value="">儿童</option> <option value="">学生</option> <option value="">残疾军人</option> <option value="">伤残人民警察</option> </select> <span class="item_"></span> </div> <div id="end"> <input type="checkbox" id="choose"> <label for="choose">我已阅读并同意遵守<a href="#">《中国铁路客户服务中心网站服务条款》</a></label> <div class="btn_box"> <button id="handup">下一步</button> </div> </div> </div> </div> <!-- 底部 --> <footer> <p>关于我们 | 网站声明</p> <p>copyright © 2019 test.com all rights reserved | 京icp备 xxxxxxxx号</p> </footer> <script src="js/index.js"></script> </body> </html>
style.css
label { cursor: pointer; } a{ color:inherit; } * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; } /*头部*/ header{ width:100%; height:120px; background-color:rgb(239,239,239); border-bottom:2px solid rgb(36,135,201); } .header-wrap{ width:1200px; margin:0 auto; } .header-wrap span, .header-wrap img{ cursor:pointer; } .header-wrap a:hover{ color:rgb(251,116,3); } /*导航左侧*/ .header-left{ float:left; width:500px; } .logo{ float:left; width:100px; margin-right:28px; } .logo-text{ float:left; width:300px; color:rgb(110,110,110); height: 120px; line-height: 120px; } .logo-text .strong{ font-size: 20px; font-weight: bold; color: rgb(80,80,80); } /*导航右侧*/ .header-right{ float:right; width:700px; height: 120px; line-height: 120px; padding-left:60px; position: relative; } .header-right img{ width:14px; } .header-right span{ margin-right:30px; float:left; } .show-nav{ cursor:pointer; position: relative; z-index: 5; float:left; } /*隐藏区域*/ .hide_nav{ display: none; position: absolute; width: 154px; background-color: #fff; border: 1px solid rgb(251,116,3); left: 0; font-size: 14px; top: 86px; } .show-nav:hover .hide_nav{ display: block; } .hide_nav ul{ width: 100%; padding: 0 10px; } .hide_nav ul li{ line-height: 37px; height: 37px; width: 100%; color:rgb(110,110,110); cursor:pointer; } .hide_nav ul li:hover{ color:rgb(251,116,3); } .line{ border-bottom:1px dotted rgb(110,110,110); } .phone{ margin-left:20px; } /*图标和文字垂直居中对齐*/ .phone img, .phone a{ vertical-align:middle; } /*主体*/ .content{ width:1200px; background: white; margin:0 auto; height: 1115px; } .title{ margin-top:20px; margin-left:5px; } .title span{ color:rgb(110,110,110); } .title span.strong{ font-size: 20px; font-weight: bold; color: rgb(80,80,80); } #total { box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.2); width: 1200px; min-height: 800px; margin: 30px auto; border-radius: 10px; overflow: hidden; border-left: 0.5px solid rgba(0, 0, 0, 0.32); border-right: 0.5px solid rgba(0, 0, 0, 0.32); border-bottom: 0.5px solid rgba(0, 0, 0, 0.32); } #total #title { background: rgb(251,116,3); color: white; width: 100%; height: 50px; line-height: 50px; font-size: 20px; padding-left: 18px; margin-bottom: 60px; } #total .item, #total .item_ { width: 90%; margin: 10px auto; font-size: 16px; font-weight: bold; position: relative; } #total .item.item, #total .item_.item { margin-top: 25px; } #total .item .important, #total .item_ .important { color: rgb(251,116,3); margin-left: 62px; } #total .item input, #total .item_ input { position: absolute; width: 300px; height: 30px; top: 32%; left: 15%; margin-top: -20px; font-size: 15px; outline: none; border: 1px solid rgba(0, 0, 0, 0.2); transition: box-shadow .5s; } #total .item input:focus, #total .item_ input:focus { box-shadow: 1px 1px 10px #6385d1, 1px 1px 10px #6385d1; } #total .item.item_, #total .item_.item_ { height: 30px; font-size: 15px; color: rgb(251,116,3); font-weight: lighter; margin: 0; display: inline-block; margin-left: 473px; } #total .item_.item_{ position: relative; top: -21px; } .item_ a{ text-decoration: underline; } select{ width: 297px; margin-left: 10px; height: 34px; font-size: 14px; color: rgb(110,110,110); } #first{ display: inline-block; z-index: 5; position: relative; width:50px; height:10px; background-color: red; margin-left: 320px; } #second{ display: inline-block; z-index: 5; position: relative; width:50px; height:10px; background-color: #ccc; } #third{ display: inline-block; z-index: 5; position: relative; width:50px; height:10px; background-color: #ccc; } #total #end { text-align: center; height: 160px; line-height: 50px; border-top: 1px solid rgba(0, 0, 0, 0.8); width: 100%; } #total #end #choose { margin-right: 6px; } .btn_box{ margin-top:20px; } #total #end #handup { width: 197px; height: 30px; border: none; background: rgb(251,116,3); color: white; border-radius: 3px; margin-left: 10px; cursor: pointer; } #total #end #handup:hover{ background: rgb(36,135,201); } #end a{ color:rgb(36,135,201); } /*隐藏的姓名规则*/ .hide_div{ position: absolute; width: 531px; font-size: 13px; left: 558px; border: 1px solid rgb(36,135,201); padding: 20px; line-height: 35px; top: 21px; color: rgb(110,110,110); display: none; } #show_div:hover+.hide_div{ display: block; } /*底部*/ footer{ height: 113px; background: #eee; text-align: center; padding: 40px; color: rgb(110,110,110); border-top:2px solid rgb(36,135,201); }
index.js
//获取元素 var useraccount=document.getelementbyid('useraccount'); var userpass=document.getelementbyid('userpass'); var userpass_=document.getelementbyid('userpass_'); var username=document.getelementbyid('username'); var information=document.getelementbyid('information'); var email=document.getelementbyid('email'); var telephone=document.getelementbyid('telephone'); var handup=document.getelementbyid('handup'); var first=document.getelementbyid('first'); var second=document.getelementbyid('second'); var third=document.getelementbyid('third'); var choose=document.getelementbyid('choose'); var items=document.queryselectorall(".item_");//获取所有提示元素的下标 //当鼠标离开输入框,产生验证 //格式正确 true var test1=false; var test2=false; var test3=false; var test4=false; var test5=false; var test6=false; var test7=false; //验证用户名 useraccount.onblur=function(){ var reg=/^[a-za-z]{1}\w{5,29}$/; if(this.value==''){ items[0].innerhtml='用户名不能为空'; items[0].style.color='red'; test1=false; }else{ if(!reg.exec(useraccount.value)){ items[0].innerhtml='6-30位字母、数字或“_”,字母开头'; items[0].style.color='red'; test1=false; }else{ items[0].innerhtml='用户输入正确'; items[0].style.color='green'; test1=true; } } } //验证密码 userpass.onblur=function(){ //默认样式 first.style.backgroundcolor='red'; second.style.backgroundcolor='#ccc'; third.style.backgroundcolor='#ccc'; //匹配6-20位任意字符 var reg=/^\s{6,20}$/; if(this.value==''){ items[1].innerhtml='密码不能为空'; items[1].style.color='red'; test2=false; }else{ if(!reg.exec(userpass.value)){//不符合要求 items[1].innerhtml='请输入6-20位数字、字母或符号'; items[1].style.color='red'; test2=false; }else{ items[1].innerhtml=''; test2=true; checkpwd(this.value); } } } //密码强度弱,只匹配数字、字母或符号 var pattern1=/^[0-9]{6,20}$|^[a-za-z]{6,20}$|^\w{6,20}$/; //密码强度中,两两组合 var pattern2=/^[0-9|a-za-z]{6,20}$|^[\w|a-za-z]{6,20}$|^[\w|0-9]{6,20}$/; //密码强度高,数字、字母或符号三种组合 var pattern3=/\w[0-9a-za-z]*/; //验证密码强弱的函数 function checkpwd(value){ if(pattern1.test(value)){//密码强度弱 first.style.backgroundcolor='red'; second.style.backgroundcolor='#ccc'; third.style.backgroundcolor='#ccc'; }else if(pattern2.test(value)){//密码强度中 first.style.backgroundcolor='red'; second.style.backgroundcolor='rgb(251,116,3)'; third.style.backgroundcolor='#ccc'; }else if(pattern3.test(value)){//密码强度高 first.style.backgroundcolor='red'; second.style.backgroundcolor='rgb(251,116,3)'; third.style.backgroundcolor='green'; } } //再次验证密码 userpass_.onblur=function(){ if(this.value==''){ items[2].innerhtml='密码不能为空'; items[2].style.color='red'; test3=false; }else{ if(this.value!=userpass.value){ items[2].innerhtml='两次密码输入不一致'; items[2].style.color='red'; test3=false; }else{ items[2].innerhtml='两次输入一致'; items[2].style.color='green'; test3=true; } } } //验证姓名 username.onblur=function(){ var reg=/^[\u4e00-\u9fa5|a-za-z]{3,30}$/; if(this.value==''){ items[3].innerhtml='姓名不能为空'; items[3].style.color='red'; test4=false; items[3].id='show_div'; }else{ if(reg.exec(username.value)){ items[3].innerhtml='姓名输入正确'; items[3].style.color='green'; test4=true; items[3].id='';//输入正确时不再提示信息 }else{ items[3].innerhtml='姓名只能包含中文或者英文,且字符在3-30个之间!'; items[3].style.color='red'; test4=false; items[3].id='show_div'; } } } //验证身份证号 information.onblur=function(){ var reg=/^\d{17}[0-9x]$/i; if(this.value==''){ items[4].innerhtml='证件号码不能为空'; items[4].style.color='red'; test5=false; }else{ if(!reg.exec(information.value)){ items[4].innerhtml='请输入18位身份证号码'; items[4].style.color='red'; test5=false; }else{ items[4].innerhtml='号码输入正确'; items[4].style.color='green'; test5=true; } } } //验证邮箱 email.onblur=function(){ var reg=/^\w+@\w+.[a-za-z_]{2,4}$/; if(this.value==''){ items[5].innerhtml='邮箱不能为空'; items[5].style.color='red'; test6=false; }else{ if(!reg.exec(email.value)){ items[5].innerhtml='请输入正确的邮箱'; items[5].style.color='red'; test6=false; }else{ items[5].innerhtml='邮箱格式正确'; items[5].style.color='green'; test6=true; } } } //验证手机号 telephone.onblur=function(){ var reg=/^1(3|4|5|6|7|8|9)\d{9}$/; if(this.value==''){ items[6].innerhtml='手机号码不能为空'; items[6].style.color='red'; test7=false; }else{ if(!reg.exec(telephone.value)){ items[6].innerhtml='您输入的手机号码不是有效的格式!'; items[6].style.color='red'; test7=false; }else{ items[6].innerhtml='手机格式正确'; items[6].style.color='green'; test7=true; } } } //点击下一步 handup.onclick=function(){ if(test1&&test2&&test3&&test4&&test5&&test6&&test7&&choose.checked){ location.href="http://www.imooc.com"; }else{ alert('填写有误!'); } }
再送一个简易版的
放图
index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="total"> <div id="title">-- 账户信息 --</div> <div class="item"> <span class="important">*</span> <label for="useraccount">用户名 :</label> <input type="text" id="useraccount" placeholder=" 用户设置成功后不可修改"> </div> <p class="item_"></p> <br> <!--_____________________________________________________________________________________________--> <div class="item"> <span class="important">*</span> <label for="userpass">登陆密码 :</label> <input type="password" id="userpass" placeholder=" 6-20位字母,数字或符号"> </div> <p class="item_"></p> <br> <!--_____________________________________________________________________________________________--> <div class="item"> <span class="important">*</span> <label for="userpass_">确认密码 :</label> <input type="password" id="userpass_"> </div> <p class="item_"></p> <br> <!--_____________________________________________________________________________________________--> <div class="item"> <span class="important">*</span> <label for="username">姓名 :</label> <input type="text" id="username" placeholder=" 请输入姓名,中文且最多五位"> </div> <p class="item_"></p> <br> <!--_____________________________________________________________________________________________--> <div class="item"> <span class="important">*</span> <label for="information">身份证号 :</label> <input type="text" id="information" placeholder=" 请输入身份证号"> </div> <p class="item_"></p> <br> <!--_____________________________________________________________________________________________--> <div class="item"> <span class="important">*</span> <label for="email">邮箱 :</label> <input type="email" id="email" placeholder=" 请输入正确邮箱格式"> </div> <p class="item_"></p> <br> <!--_____________________________________________________________________________________________--> <div class="item"> <span class="important">*</span> <label for="telephone">手机号码 :</label> <input type="tel" id="telephone" placeholder=" 请输入您的手机号码"> </div> <p class="item_"></p> <br> <!--__________________________________________________________________________________________________--> <div id="end"> <input type="checkbox" id="choose"> <label for="choose">我已阅读并同意遵守规定</label> <button id="handup">确认提交</button> </div> </div> </body> </html> <script src="js/test.js"></script> style.css label { cursor: pointer; } * { margin: 0; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; } a { color: inherit; } body { background: rgba(0, 0, 0, 0.1); } #total { box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.2); background: white; width: 60%; min-height: 800px; margin: 50px auto; border-radius: 10px; overflow: hidden; border-left: 0.5px solid rgba(0, 0, 0, 0.32); border-right: 0.5px solid rgba(0, 0, 0, 0.32); border-bottom: 0.5px solid rgba(0, 0, 0, 0.32); } #total #title { background: #6385d1; color: white; width: 100%; letter-spacing: 5px; height: 50px; line-height: 50px; text-align: center; font-size: 20px; font-weight: bold; } #total .item, #total .item_ { width: 90%; margin: 10px auto; height: 25px; line-height: 25px; font-size: 18px; font-weight: bold; position: relative; } #total .item.item, #total .item_.item { margin-top: 20px; } #total .item .important, #total .item_ .important { color: #6385d1; } #total .item input, #total .item_ input { position: absolute; width: 50%; height: 40px; top: 50%; left: 15%; margin-top: -20px; font-size: 15px; outline: none; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; transition: box-shadow .5s; } #total .item input:focus, #total .item_ input:focus { box-shadow: 1px 1px 10px #6385d1, 1px 1px 10px #6385d1; } #total .item.item_, #total .item_.item_ { width: 60%; height: 30px; border-bottom: .5px solid #6385d1; border-radius: 2px; font-size: 15px; color: rgba(0, 0, 0, 0.6); letter-spacing: 2px; font-weight: lighter; padding-left: 10px; margin: 0; margin-left: 5%; } #total #end { text-align: center; height: 50px; line-height: 50px; border-top: 1px solid rgba(0, 0, 0, 0.8); width: 100%; letter-spacing: 2px; } #total #end #choose { margin-right: 20px; } #total #end #handup { width: 130px; height: 30px; border: none; background: #6385d1; color: white; border-radius: 3px; margin-left: 10px; }
test.js
var useraccount = document.queryselector("#useraccount"),//获取用户名 userpass = document.queryselector("#userpass"),//获取密码 userpass_ = document.queryselector("#userpass_"),//获取确认密码 username = document.queryselector("#username"),//获取姓名 information = document.queryselector("#information"),//获取身份证号码 email = document.queryselector("#email"),//获取邮箱号码 telephone = document.queryselector("#telephone"),//获取手机号码 items = document.queryselectorall(".item_"),//获取所有提示文段的下标 acho = document.queryselector("#choose"), obtn = document.queryselector("#handup"); var test1 = false, test2 = false, test3 = false, test4 = false, test5 = false, test6 = false, test7 = false ; useraccount.onfocus = function () { items[0].innerhtml = "6-30位字母、数字或'_'"; items[0].style.color = "green"; }; useraccount.onblur = function () { var reg = /^\w{6,30}$/; if (this.value == "") { items[0].innerhtml = "请您务必写入用户名!"; items[0].style.color = "red"; } else { if (!reg.exec(useraccount.value)) { items[0].innerhtml = "6-30位字母、数字或'_'"; items[0].style.color = "red"; } else { items[0].innerhtml = "格式正确"; items[0].style.color = "green"; test1 = true; } } }; //-------------------------------------------------------------账号结束; userpass.onfocus = function () { items[1].innerhtml = "6-20位字母,数字或符号"; items[1].style.color = "green"; }; userpass.onblur = function () { var reg = /^\w{6,20}$/; if (this.value == "") { items[1].innerhtml = "请您务必写入密码!"; items[1].style.color = "red"; } else { if (!reg.exec(userpass.value)) { items[1].innerhtml = "请输入6-20位字母,数字或符号"; items[1].style.color = "red"; } else { items[1].innerhtml = "格式正确"; items[1].style.color = "green"; test2 = true; } } }; /*------------------------------------------------------------------密码结束*/ userpass_.onfocus = function () { items[2].innerhtml = "请确认两次密码相同"; items[2].style.color = "green"; }; userpass_.onblur = function () { if (this.value == "") { items[2].innerhtml = "请务必再次确认密码"; items[2].style.color = "red"; } else { if (this.value != userpass.value) { items[2].innerhtml = "两次密码不相同"; items[2].style.color = "red"; } else { items[2].innerhtml = "格式正确"; items[2].style.color = "green"; test3 = true; } } }; /*-----------------------------------------------------------------------确认密码结束*/ username.onfocus = function () { items[3].innerhtml = "请输入您的中文名字"; items[3].style.color = "green"; }; username.onblur = function () { var reg = /^[\u4e00-\u9fa5]{2,5}$/; if (this.value == "") { items[3].innerhtml = "请务必写入您的姓名"; items[3].style.color = "red"; } else { if (!reg.exec(username.value)) { items[3].innerhtml = "请输入中文名并确认是正确格式"; items[3].style.color = "red"; } else { items[3].innerhtml = "格式正确"; items[3].style.color = "green"; test4 = true } } }; //---------------------------------------------------------------------------------姓名结束 information.onfocus = function () { items[4].innerhtml = "请输入您的身份证号码"; items[4].style.color = "green"; }; information.onblur = function () { var reg = /^\d{17}[0-9x]$/; if (this.value == "") { items[4].innerhtml = "请您务必写入身份证号码!"; items[4].style.color = "red"; } else { if (!reg.exec(information.value)) { items[4].innerhtml = "请输入身份证号码正确格式"; items[4].style.color = "red"; } else { items[4].innerhtml = "格式正确"; items[4].style.color = "green"; test5 = true; } } }; //------------------------------------------------------------------------身份证号码结束 email.onfocus = function () { items[5].innerhtml = "请输入您邮箱的正确格式"; items[5].style.color = "green"; }; email.onblur = function () { var reg = /^\w+@\w+.[a-za-z]{2,3}(.[a-za-z]{2,3})?$/; if (this.value == "") { items[5].innerhtml = "请您务必写入邮箱!"; items[5].style.color = "red"; } else { if (!reg.exec(email.value)) { items[5].innerhtml = "请输入邮箱正确格式"; items[5].style.color = "red"; } else { items[5].innerhtml = "格式正确"; items[5].style.color = "green"; test6 = true; } } }; //----------------------------------------------------------------------邮箱结束 telephone.onfocus = function () { items[6].innerhtml = "请输入您的手机号码"; items[6].style.color = "green"; }; telephone.onblur = function () { var reg = /^\d{11}$/; if (this.value == "") { items[6].innerhtml = "请输入11位手机号码!"; items[6].style.color = "red"; } else { if (!reg.exec(telephone.value)) { items[6].innerhtml = "请输入11位手机号码"; items[6].style.color = "red"; } else { items[6].innerhtml = "格式正确"; items[6].style.color = "green"; test7 = true; } } }; obtn.onclick = function () { if (acho.checked == false || test1 == false || test2 == false || test3 == false || test4 == false || test5 == false || test6 == false || test7 == false) { alert(" 您 的 信 息 有 误 ") } else { alert(" 登 记 成 功 ! ") } };
总结
以上是小编给大家分享js表单验证源码(带错误提示及密码等级),希望对大家有所帮助!