分享JS表單驗(yàn)證源碼（帶錯(cuò)誤提示及密碼等級）
更新時(shí)間：2020年01月05日 08:54:15 作者：陳鶯鶯呀
這篇文章主要介紹了JS表單驗(yàn)證源碼（帶錯(cuò)誤提示及密碼等級）,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
先曬圖
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"> <!-- 左側(cè) --> <div class="header-left"> <div class="logo"> <img src="img/logo.png"> </div> <div class="logo-text"> <span class="strong">XX高鐵客戶服務(wù)中心 | </span> <span>客戶服務(wù)</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">我的保險(xiǎn)</li> <li class="line">查勘個(gè)人信息</li> <li>賬戶安全</li> <li class="line">常用聯(lián)系人</li> <li class="line">重點(diǎn)旅客預(yù)約</li> <li>遺失物品尋找</li> <li class="line">服務(wù)查詢</li> <li class="line">投訴</li> <li>建議</li> </ul> </div> </div> <span class="phone"> <img src="img/phone.png"> <a href="#">手機(jī)版</a> </span> </div> </div> </header> <!-- 主體部分 --> <div class="content"> <p class="title"> <span class="strong">您現(xiàn)在的位置：</span> <span>客運(yùn)首頁 > 注冊</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=" 用戶設(shè)置成功后不可修改"> <span class="item_">6-30位字母、數(shù)字或“_”，字母開頭</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位字母、數(shù)字或符號(hào)" 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_">確認(rèn)密碼 :</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">姓名填寫規(guī)則</a></span> <div class="hide_div"> <p>1.確認(rèn)姓名中生僻字無法輸入時(shí)，可用生僻字拼音或同音字替代。<br> 2.輸入姓名保存后，遇有系統(tǒng)無法正確顯示的漢字，可用該漢字的拼音或同音字重新修改后保存。<br> 3.姓名中有繁體字無法輸入時(shí)，可用簡體替代。<br> 4.姓名較長，漢字與英文字符合計(jì)超過30個(gè)（1個(gè)漢字算2個(gè)字符）的，需按姓名中第一個(gè)漢字或英文字符開始按順序連續(xù)輸入30個(gè)字符（空格字符不輸入），其中英文字符輸入時(shí)不區(qū)別大小寫 </p> </div> </div> <div class="item"> <span class="important">*</span> <label for="idinfo">身份證號(hào) :</label> <select name="idinfo" id="idinfo"> <option value="" selected="selected">二代身份證</option> <option value="">港澳通行證</option> <option value="">臺(tái)灣通行證</option> <option value="">護(hù)照</option> </select> </div> <div class="item" style="margin-top: 51px;"> <span class="important">*</span> <label for="information">證件號(hào)碼 :</label> <input type="text" id="information" placeholder=" 請輸入您的證件號(hào)碼"> <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">手機(jī)號(hào)碼 :</label> <input type="tel" id="telephone" placeholder=" 請輸入您的手機(jī)號(hào)碼"> <span class="item_">請正確填寫手機(jī)號(hào)碼，稍后將向該手機(jī)號(hào)碼發(fā)送短信驗(yàn)證碼</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="">學(xué)生</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="#">《中國鐵路客戶服務(wù)中心網(wǎng)站服務(wù)條款》</a></label> <div class="btn_box"> <button id="handup">下一步</button> </div> </div> </div> </div> <!-- 底部 --> <footer> <p>關(guān)于我們 | 網(wǎng)站聲明</p> <p>Copyright © 2019 test.com All rights reserved | 京ICP備 xxxxxxxx號(hào)</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);
}
/*導(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)和文字垂直居中對齊*/
.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='請輸入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='請輸入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='請輸入正確的郵箱';
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.;
}else{
alert('填寫有誤！');
}
}
再送一個(gè)簡易版的
放圖
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=" 用戶設(shè)置成功后不可修改">
</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位字母,數(shù)字或符號(hào)">
</div>
<p class="item_"></p>
<br>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="userPass_">確認(rèn)密碼 :</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">身份證號(hào) :</label>
<input type="text" id="information" placeholder=" 請輸入身份證號(hào)">
</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">手機(jī)號(hào)碼 :</label>
<input type="tel" id="telephone" placeholder=" 請輸入您的手機(jī)號(hào)碼">
</div>
<p class="item_"></p>
<br>
<!--__________________________________________________________________________________________________-->
<div id="end">
<input type="checkbox" id="choose">
<label for="choose">我已閱讀并同意遵守規(guī)定</label>
<button id="handup">確認(rèn)提交</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_"),//獲取確認(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 = "請您務(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 = "請您務(wù)必寫入密碼!";
items[1].style.color = "red";
} else {
if (!reg.exec(userPass.value)) {
items[1].innerHTML = "請輸入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 = "請確認(rèn)兩次密碼相同";
items[2].style.color = "green";
};
userPass_.onblur = function () {
if (this.value == "") {
items[2].innerHTML = "請務(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 = "請輸入您的中文名字";
items[3].style.color = "green";
};
userName.onblur = function () {
var reg = /^[\u4e00-\u9fa5]{2,5}$/;
if (this.value == "") {
items[3].innerHTML = "請務(wù)必寫入您的姓名";
items[3].style.color = "red";
} else {
if (!reg.exec(userName.value)) {
items[3].innerHTML = "請輸入中文名并確認(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 = "請輸入您的身份證號(hào)碼";
items[4].style.color = "green";
};
information.onblur = function () {
var reg = /^\d{17}[0-9x]$/;
if (this.value == "") {
items[4].innerHTML = "請您務(wù)必寫入身份證號(hào)碼!";
items[4].style.color = "red";
} else {
if (!reg.exec(information.value)) {
items[4].innerHTML = "請輸入身份證號(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 = "請輸入您郵箱的正確格式";
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 = "請您務(wù)必寫入郵箱!";
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;
}
}
};
//----------------------------------------------------------------------郵箱結(jié)束
telephone.onfocus = function () {
items[6].innerHTML = "請輸入您的手機(jī)號(hào)碼";
items[6].style.color = "green";
};
telephone.onblur = function () {
var reg = /^\d{11}$/;
if (this.value == "") {
items[6].innerHTML = "請輸入11位手機(jī)號(hào)碼!";
items[6].style.color = "red";
} else {
if (!reg.exec(telephone.value)) {
items[6].innerHTML = "請輸入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(" 登 記 成 功 ! ")
}
};
總結(jié)
以上是小編給大家分享JS表單驗(yàn)證源碼（帶錯(cuò)誤提示及密碼等級），希望對大家有所幫助！
您可能感興趣的文章:
- JavaScript實(shí)現(xiàn)表單驗(yàn)證功能
- php+js實(shí)現(xiàn)的拖動(dòng)滑塊驗(yàn)證碼驗(yàn)證表單操作示例【附源碼下載】
- JS表單驗(yàn)證插件之?dāng)?shù)據(jù)與邏輯分離操作實(shí)例分析【策略模式】
- JS使用正則表達(dá)式實(shí)現(xiàn)常用的表單驗(yàn)證功能分析
- laravel框架使用FormRequest進(jìn)行表單驗(yàn)證，驗(yàn)證異常返回JSON操作示例
- JS簡單表單驗(yàn)證功能完整示例
- JavaScript使用表單元素驗(yàn)證表單的示例代碼
- vue.js表單驗(yàn)證插件(vee-validate)的使用教程詳解
- 使用vue自定義指令開發(fā)表單驗(yàn)證插件validate.js
- 原生js 實(shí)現(xiàn)表單驗(yàn)證功能
相關(guān)文章
今天小編就為大家分享一篇關(guān)于使用JavaScript保存文本文件到本地的兩種方法，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
js運(yùn)動(dòng)動(dòng)畫的八個(gè)知識(shí)點(diǎn)
本文給大家分享的是個(gè)人在學(xué)習(xí)js運(yùn)動(dòng)動(dòng)畫的過程中總結(jié)的我們需要注意的8個(gè)知識(shí)點(diǎn)，分別是速度動(dòng)畫、透明度漸變、緩沖運(yùn)動(dòng)、多物體運(yùn)動(dòng)、獲取樣式、任意屬性值、鏈?zhǔn)竭\(yùn)動(dòng)和同時(shí)運(yùn)動(dòng)，非常的詳細(xì)，推薦給小伙伴們。2015-03-03
微信小程序下拉加載和上拉刷新兩種實(shí)現(xiàn)方法詳解
這篇文章主要介紹了微信小程序下拉加載和上拉刷新兩種實(shí)現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
前端本地文件獲取excel表格內(nèi)容并渲染在頁面的方法
這篇文章主要介紹了前端本地文件獲取excel表格內(nèi)容并渲染在頁面的方法,主要利用SheetJS插件用于處理Excel文件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
arcgis for js 修改infowindow樣式的方法
下面小編就為大家?guī)硪黄猘rcgis for js 修改infowindow樣式的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了JavaScript對象引用與賦值,結(jié)合實(shí)例形式分析了JavaScript對象引用及賦值的操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03
JS實(shí)現(xiàn)的冒泡排序，快速排序，插入排序算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的冒泡排序，快速排序，插入排序算法,結(jié)合實(shí)例形式分析了javascript冒泡排序，快速排序，插入排序算法的相關(guān)原理及實(shí)現(xiàn)方法,需要的朋友可以參考下2019-03-03
判斷當(dāng)前使用的是那個(gè)瀏覽器及瀏覽器的那個(gè)版本，根據(jù)瀏覽器版本來調(diào)整CSS的樣式，下面是獲取當(dāng)前瀏覽器的代碼,需要的朋友可以參考下2014-06-06
構(gòu)建一個(gè)JavaScript插件系統(tǒng)
這篇文章主要介紹了如何構(gòu)建一個(gè)JavaScript插件系統(tǒng)，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-10-10
js實(shí)現(xiàn)class樣式的修改、添加及刪除的方法
這篇文章主要介紹了js實(shí)現(xiàn)class樣式的修改、添加及刪除的方法,主要通過修改標(biāo)簽的className來實(shí)現(xiàn)這一功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01