分享JS表单验证源码（带错误提示及密码等级）

2023-08-03 13:30:05 147

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:2pxsolidrgb(36,135,201); } .header-wrap{ width:1200px; margin:0auto; } .header-wrapspan, .header-wrapimg{ cursor:pointer; } .header-wrapa: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-rightimg{ width:14px; } .header-rightspan{ 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:1pxsolidrgb(251,116,3); left:0; font-size:14px; top:86px; } .show-nav:hover.hide_nav{ display:block; } .hide_navul{ width:100%; padding:010px; } .hide_navulli{ line-height:37px; height:37px; width:100%; color:rgb(110,110,110); cursor:pointer; } .hide_navulli:hover{ color:rgb(251,116,3); } .line{ border-bottom:1pxdottedrgb(110,110,110); } .phone{ margin-left:20px; } /*图标和文字垂直居中对齐*/ .phoneimg,.phonea{ vertical-align:middle; } /*主体*/ .content{ width:1200px; background:white; margin:0auto; height:1115px; } .title{ margin-top:20px; margin-left:5px; } .titlespan{ color:rgb(110,110,110); } .titlespan.strong{ font-size:20px; font-weight:bold; color:rgb(80,80,80); } #Total{ box-shadow:2px2px10px1pxrgba(0,0,0,0.2); width:1200px; min-height:800px; margin:30pxauto; border-radius:10px; overflow:hidden; border-left:0.5pxsolidrgba(0,0,0,0.32); border-right:0.5pxsolidrgba(0,0,0,0.32); border-bottom:0.5pxsolidrgba(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:10pxauto; 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.iteminput,#Total.item_input{ position:absolute; width:300px; height:30px; top:32%; left:15%; margin-top:-20px; font-size:15px; outline:none; border:1pxsolidrgba(0,0,0,0.2); transition:box-shadow.5s; } #Total.iteminput:focus,#Total.item_input:focus{ box-shadow:1px1px10px#6385d1,1px1px10px#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:1pxsolidrgba(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); } #enda{ color:rgb(36,135,201); } /*隐藏的姓名规则*/ .hide_div{ position:absolute; width:531px; font-size:13px; left:558px; border:1pxsolidrgb(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:2pxsolidrgb(36,135,201); }

//获取元素 varuserAccount=document.getElementById('userAccount'); varuserPass=document.getElementById('userPass'); varuserPass_=document.getElementById('userPass_'); varuserName=document.getElementById('userName'); varinformation=document.getElementById('information'); varemail=document.getElementById('email'); vartelephone=document.getElementById('telephone'); varhandup=document.getElementById('handup'); varfirst=document.getElementById('first'); varsecond=document.getElementById('second'); varthird=document.getElementById('third'); varchoose=document.getElementById('choose'); varitems=document.querySelectorAll(".item_");//获取所有提示元素的下标 //当鼠标离开输入框，产生验证 //格式正确true vartest1=false; vartest2=false; vartest3=false; vartest4=false; vartest5=false; vartest6=false; vartest7=false; //验证用户名 userAccount.onblur=function(){ varreg=/^[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位任意字符 varreg=/^\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); } } } //密码强度弱，只匹配数字、字母或符号 varpattern1=/^[0-9]{6,20}$|^[a-zA-Z]{6,20}$|^\W{6,20}$/; //密码强度中，两两组合 varpattern2=/^[0-9|a-zA-Z]{6,20}$|^[\W|a-zA-Z]{6,20}$|^[\W|0-9]{6,20}$/; //密码强度高，数字、字母或符号三种组合 varpattern3=/\W[0-9a-zA-Z]*/; //验证密码强弱的函数 functioncheckPwd(value){ if(pattern1.test(value)){//密码强度弱 first.style.backgroundColor='red'; second.style.backgroundColor='#ccc'; third.style.backgroundColor='#ccc'; }elseif(pattern2.test(value)){//密码强度中 first.style.backgroundColor='red'; second.style.backgroundColor='rgb(251,116,3)'; third.style.backgroundColor='#ccc'; }elseif(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(){ varreg=/^[\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(){ varreg=/^\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(){ varreg=/^\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(){ varreg=/^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 --账户信息-- * 用户名:

* 登陆密码:

* 确认密码:

* 姓名:

* 身份证号:

* 邮箱:

* 手机号码:

我已阅读并同意遵守规定确认提交 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:2px2px10px1pxrgba(0,0,0,0.2); background:white; width:60%; min-height:800px; margin:50pxauto; border-radius:10px; overflow:hidden; border-left:0.5pxsolidrgba(0,0,0,0.32); border-right:0.5pxsolidrgba(0,0,0,0.32); border-bottom:0.5pxsolidrgba(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:10pxauto; 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.iteminput,#Total.item_input{ position:absolute; width:50%; height:40px; top:50%; left:15%; margin-top:-20px; font-size:15px; outline:none; border:1pxsolidrgba(0,0,0,0.2); border-radius:5px; transition:box-shadow.5s;} #Total.iteminput:focus,#Total.item_input:focus{ box-shadow:1px1px10px#6385d1,1px1px10px#6385d1;} #Total.item.item_,#Total.item_.item_{ width:60%; height:30px; border-bottom:.5pxsolid#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:1pxsolidrgba(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;}

varuserAccount=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"); vartest1=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(){ varreg=/^\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(){ varreg=/^\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(){ varreg=/^[\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(){ varreg=/^\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(){ varreg=/^\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(){ varreg=/^\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表单验证源码（带错误提示及密码等级）

热门推荐

随机推荐