這篇文章主要介紹了如何實(shí)現(xiàn)JS表單驗(yàn)證,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:域名申請(qǐng)、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、疊彩網(wǎng)站維護(hù)、網(wǎng)站推廣。
先曬圖
index.html
Index 您現(xiàn)在的位置: 客運(yùn)首頁 > 注冊(cè)
賬戶信息* 6-30位字母、數(shù)字或“_”,字母開頭*** 姓名填寫規(guī)則1.確認(rèn)姓名中生僻字無法輸入時(shí),可用生僻字拼音或同音字替代。
2.輸入姓名保存后,遇有系統(tǒng)無法正確顯示的漢字,可用該漢字的拼音或同音字重新修改后保存。
3.姓名中有繁體字無法輸入時(shí),可用簡(jiǎn)體替代。
4.姓名較長(zhǎng),漢字與英文字符合計(jì)超過30個(gè)(1個(gè)漢字算2個(gè)字符)的,需按姓名中第一個(gè)漢字或英文字符開始按順序連續(xù)輸入30個(gè)字符(空格字符不輸入),其中英文字符輸入時(shí)不區(qū)別大小寫**** 請(qǐng)正確填寫手機(jī)號(hào)碼,稍后將向該手機(jī)號(hào)碼發(fā)送短信驗(yàn)證碼*
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); } /*導(dǎo)航左側(cè)*/ .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); } /*導(dǎo)航右側(cè)*/ .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; } /*隱藏區(qū)域*/ .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; } /*圖標(biāo)和文字垂直居中對(duì)齊*/ .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); } /*隱藏的姓名規(guī)則*/ .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_");//獲取所有提示元素的下標(biāo) //當(dāng)鼠標(biāo)離開輸入框,產(chǎn)生驗(yàn)證 //格式正確 true var test1=false; var test2=false; var test3=false; var test4=false; var test5=false; var test6=false; var test7=false; //驗(yàn)證用戶名 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位字母、數(shù)字或“_”,字母開頭'; items[0].style.color='red'; test1=false; }else{ items[0].innerHTML='用戶輸入正確'; items[0].style.color='green'; test1=true; } } } //驗(yàn)證密碼 userPass.onblur=function(){ //默認(rèn)樣式 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='請(qǐng)輸入6-20位數(shù)字、字母或符號(hào)'; items[1].style.color='red'; test2=false; }else{ items[1].innerHTML=''; test2=true; checkPwd(this.value); } } } //密碼強(qiáng)度弱,只匹配數(shù)字、字母或符號(hào) var pattern1=/^[0-9]{6,20}$|^[a-zA-Z]{6,20}$|^\W{6,20}$/; //密碼強(qiáng)度中,兩兩組合 var pattern2=/^[0-9|a-zA-Z]{6,20}$|^[\W|a-zA-Z]{6,20}$|^[\W|0-9]{6,20}$/; //密碼強(qiáng)度高,數(shù)字、字母或符號(hào)三種組合 var pattern3=/\W[0-9a-zA-Z]*/; //驗(yàn)證密碼強(qiáng)弱的函數(shù) function checkPwd(value){ if(pattern1.test(value)){//密碼強(qiáng)度弱 first.style.backgroundColor='red'; second.style.backgroundColor='#ccc'; third.style.backgroundColor='#ccc'; }else if(pattern2.test(value)){//密碼強(qiáng)度中 first.style.backgroundColor='red'; second.style.backgroundColor='rgb(251,116,3)'; third.style.backgroundColor='#ccc'; }else if(pattern3.test(value)){//密碼強(qiáng)度高 first.style.backgroundColor='red'; second.style.backgroundColor='rgb(251,116,3)'; third.style.backgroundColor='green'; } } //再次驗(yàn)證密碼 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; } } } //驗(yàn)證姓名 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='';//輸入正確時(shí)不再提示信息 }else{ items[3].innerHTML='姓名只能包含中文或者英文,且字符在3-30個(gè)之間!'; items[3].style.color='red'; test4=false; items[3].id='show_div'; } } } //驗(yàn)證身份證號(hào) information.onblur=function(){ var reg=/^\d{17}[0-9x]$/i; if(this.value==''){ items[4].innerHTML='證件號(hào)碼不能為空'; items[4].style.color='red'; test5=false; }else{ if(!reg.exec(information.value)){ items[4].innerHTML='請(qǐng)輸入18位身份證號(hào)碼'; items[4].style.color='red'; test5=false; }else{ items[4].innerHTML='號(hào)碼輸入正確'; items[4].style.color='green'; test5=true; } } } //驗(yàn)證郵箱 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='請(qǐng)輸入正確的郵箱'; items[5].style.color='red'; test6=false; }else{ items[5].innerHTML='郵箱格式正確'; items[5].style.color='green'; test6=true; } } } //驗(yàn)證手機(jī)號(hào) telephone.onblur=function(){ var reg=/^1(3|4|5|6|7|8|9)\d{9}$/; if(this.value==''){ items[6].innerHTML='手機(jī)號(hào)碼不能為空'; items[6].style.color='red'; test7=false; }else{ if(!reg.exec(telephone.value)){ items[6].innerHTML='您輸入的手機(jī)號(hào)碼不是有效的格式!'; items[6].style.color='red'; test7=false; }else{ items[6].innerHTML='手機(jī)格式正確'; items[6].style.color='green'; test7=true; } } } //點(diǎn)擊下一步 handup.onclick=function(){ if(test1&&test2&&test3&&test4&&test5&&test6&&test7&&choose.checked){ location.href="http://www.imooc.com"; }else{ alert('填寫有誤!'); } }
再送一個(gè)簡(jiǎn)易版的
放圖
index.html
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: 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_"),//獲取確認(rèn)密碼 userName = document.querySelector("#userName"),//獲取姓名 information = document.querySelector("#information"),//獲取身份證號(hào)碼 email = document.querySelector("#email"),//獲取郵箱號(hào)碼 telephone = document.querySelector("#telephone"),//獲取手機(jī)號(hào)碼 items = document.querySelectorAll(".item_"),//獲取所有提示文段的下標(biāo) 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位字母、數(shù)字或'_'"; items[0].style.color = "green"; }; userAccount.onblur = function () { var reg = /^\w{6,30}$/; if (this.value == "") { items[0].innerHTML = "請(qǐng)您務(wù)必寫入用戶名!"; items[0].style.color = "red"; } else { if (!reg.exec(userAccount.value)) { items[0].innerHTML = "6-30位字母、數(shù)字或'_'"; items[0].style.color = "red"; } else { items[0].innerHTML = "格式正確"; items[0].style.color = "green"; test1 = true; } } }; //-------------------------------------------------------------賬號(hào)結(jié)束; userPass.onfocus = function () { items[1].innerHTML = "6-20位字母,數(shù)字或符號(hào)"; items[1].style.color = "green"; }; userPass.onblur = function () { var reg = /^\w{6,20}$/; if (this.value == "") { items[1].innerHTML = "請(qǐng)您務(wù)必寫入密碼!"; items[1].style.color = "red"; } else { if (!reg.exec(userPass.value)) { items[1].innerHTML = "請(qǐng)輸入6-20位字母,數(shù)字或符號(hào)"; items[1].style.color = "red"; } else { items[1].innerHTML = "格式正確"; items[1].style.color = "green"; test2 = true; } } }; /*------------------------------------------------------------------密碼結(jié)束*/ userPass_.onfocus = function () { items[2].innerHTML = "請(qǐng)確認(rèn)兩次密碼相同"; items[2].style.color = "green"; }; userPass_.onblur = function () { if (this.value == "") { items[2].innerHTML = "請(qǐng)務(wù)必再次確認(rèn)密碼"; 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; } } }; /*-----------------------------------------------------------------------確認(rèn)密碼結(jié)束*/ userName.onfocus = function () { items[3].innerHTML = "請(qǐng)輸入您的中文名字"; items[3].style.color = "green"; }; userName.onblur = function () { var reg = /^[\u4e00-\u9fa5]{2,5}$/; if (this.value == "") { items[3].innerHTML = "請(qǐng)務(wù)必寫入您的姓名"; items[3].style.color = "red"; } else { if (!reg.exec(userName.value)) { items[3].innerHTML = "請(qǐng)輸入中文名并確認(rèn)是正確格式"; items[3].style.color = "red"; } else { items[3].innerHTML = "格式正確"; items[3].style.color = "green"; test4 = true } } }; //---------------------------------------------------------------------------------姓名結(jié)束 information.onfocus = function () { items[4].innerHTML = "請(qǐng)輸入您的身份證號(hào)碼"; items[4].style.color = "green"; }; information.onblur = function () { var reg = /^\d{17}[0-9x]$/; if (this.value == "") { items[4].innerHTML = "請(qǐng)您務(wù)必寫入身份證號(hào)碼!"; items[4].style.color = "red"; } else { if (!reg.exec(information.value)) { items[4].innerHTML = "請(qǐng)輸入身份證號(hào)碼正確格式"; items[4].style.color = "red"; } else { items[4].innerHTML = "格式正確"; items[4].style.color = "green"; test5 = true; } } }; //------------------------------------------------------------------------身份證號(hào)碼結(jié)束 email.onfocus = function () { items[5].innerHTML = "請(qǐng)輸入您郵箱的正確格式"; 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 = "請(qǐng)您務(wù)必寫入郵箱!"; items[5].style.color = "red"; } else { if (!reg.exec(email.value)) { items[5].innerHTML = "請(qǐng)輸入郵箱正確格式"; items[5].style.color = "red"; } else { items[5].innerHTML = "格式正確"; items[5].style.color = "green"; test6 = true; } } }; //----------------------------------------------------------------------郵箱結(jié)束 telephone.onfocus = function () { items[6].innerHTML = "請(qǐng)輸入您的手機(jī)號(hào)碼"; items[6].style.color = "green"; }; telephone.onblur = function () { var reg = /^\d{11}$/; if (this.value == "") { items[6].innerHTML = "請(qǐng)輸入11位手機(jī)號(hào)碼!"; items[6].style.color = "red"; } else { if (!reg.exec(telephone.value)) { items[6].innerHTML = "請(qǐng)輸入11位手機(jī)號(hào)碼"; 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(" 登 記 成 功 ! ") } };
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何實(shí)現(xiàn)JS表單驗(yàn)證”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!