分享JS表單驗證原始碼（帶錯誤提示及密碼等級）

阿新 • • 發佈：2020-01-09

先晒圖

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,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);
 cursor:pointer;
}

.hide_nav ul li:hover{
 color:rgb(251,3);
}
.line{
 border-bottom:1px dotted rgb(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);
}

.title span.strong{
 font-size: 20px;
 font-weight: bold;
 color: rgb(80,80);
}

#Total {
 box-shadow: 2px 2px 10px 1px rgba(0,0.2);
 width: 1200px;
 min-height: 800px;
 margin: 30px auto;
 border-radius: 10px;
 overflow: hidden;
 border-left: 0.5px solid rgba(0,0.32);
 border-right: 0.5px solid rgba(0,0.32);
 border-bottom: 0.5px solid rgba(0,0.32); 
}

#Total #Title {
 background: rgb(251,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,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.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,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);
}

#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.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,3);
 color: white;
 border-radius: 3px;
 margin-left: 10px; 
 cursor: pointer;
}

#Total #end #handup:hover{
 background: rgb(36,201);
}

#end a{
 color:rgb(36,201);
}
/*隱藏的姓名規則*/
.hide_div{
 position: absolute;
 width: 531px;
 font-size: 13px;
 left: 558px;
 border: 1px solid rgb(36,201);
 padding: 20px;
 line-height: 35px;
 top: 21px;
 color: rgb(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);
 border-top:2px solid rgb(36,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,3)';
 third.style.backgroundColor='#ccc';
 }else if(pattern3.test(value)){//密碼強度高
 first.style.backgroundColor='red';
 second.style.backgroundColor='rgb(251,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.1); }

#Total {
 box-shadow: 2px 2px 10px 1px rgba(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.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.2);
 border-radius: 5px;
 transition: box-shadow .5s; }
 #Total .item input:focus,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.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.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表單驗證原始碼（帶錯誤提示及密碼等級），希望對大家有所幫助！

分享JS表單驗證原始碼（帶錯誤提示及密碼等級）

先晒圖 index.html <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

JS表單驗證原始碼（帶錯誤提示及密碼等級）

先晒圖 index.html <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

JS表單驗證外掛之資料與邏輯分離操作例項分析【策略模式】

本文例項講述了JS表單驗證外掛之資料與邏輯分離操作。分享給大家供大家參考，具體如下：

原生Js表單驗證，Js驗證表單是否為空，Js前端驗證空值

技術標籤：前端javascriptjs表單驗證驗證表單前端驗證為了緩解伺服器壓力，一般先在前端進行驗證表單，當然後端也要做驗證，後端的驗證主要是在技術人員突破前端限制而設計的，是為了整個安全，前端的驗證是第一

JS表單驗證

技術標籤：JavaScriptjavascriptcsshtmlhtml5 很多頁面都會有表單提交，驗證表單資料是否正確，是要把表單提交到服務端，跟資料庫進行比對。然而有些簡單的事情，其實前端就可以先驗證一下，比如字元格式，輸入長

史上最全JS表單驗證封裝類

1 /*! 2* 資料驗證工具類 3* 2016-12-30 4* wangbt 5*/ 6 7 /** 8* 相關認證的正則表示式 9*/ 10 var verificatRet = {

js表單驗證(checkFormItem)

CharType,表單資料型別 \"C\" 為字串，\"N\" 為數字,\"D\"為日期型別。 * MaxLength(最大長度) 整型數字 0表示不限制最大長度

element表單驗證如何清除校驗提示語

目錄問題場景：解決方案：1. 對欄位進行單獨校驗2. 直接清除表單域下該欄位的提示資訊問題場景：

html表單的應用（除input元素及屬性）

建立表單在html5中<form></form>標記被用於定義表單域，即建立一個表單以實現使用者資訊收集和傳遞

[JS設計模式]：策略模式及應用-獎金、表單驗證的實現（5）

介紹策略模式的意義是定義一系列的演算法，把它們一個個封裝起來，並且使它們可相互替換。此模式讓演算法的變化不會影響到使用演算法的客戶。

JS正則表示式實現簡單的表單驗證（賬號，密碼，手機號）

技術標籤：javascript 首先有三個文字框，和一個提交按鈕，第一個輸入賬號，第二個密碼，第三個手機號我們的需求：判斷3個文字框是否全部輸入正確，當我們點選提交時，如果有一個輸入錯誤則不能提交，全部輸入正

JS簡單表單驗證功能完整示例

本文例項講述了JS簡單表單驗證功能。分享給大家供大家參考，具體如下：簡單js表單驗證demo

JS使用正則表示式實現常用的表單驗證功能分析

本文例項講述了JS使用正則表示式實現常用的表單驗證功能。分享給大家供大家參考，具體如下：

element-ui的表單驗證配合其他元件使用（wangEditor），顯示出element表單驗證的必填小紅點

在使用element-ui開發的時候，總感覺element-ui的元件不夠用，這個時候總會需要配合其他的單獨的元件來使用。這一次我就用到了富文字，然而element-ui中並沒有富文字元件，而且是用在表單中，需要進行表單驗證（就是

WPF 驗證表單方法3（彈窗）

本文講述，當彈窗樣式固定，表單與提交按鈕不在同一個檔案下時，如何控制提交按鈕是否可用

antd-for-vue 表單驗證失效自定義表單驗證使表單非空驗證失效（其他驗證失效）

## antd-for-vue 表單驗證失效自定義表單驗證使表單非空驗證失效（其他驗證失效）##### antd 的表單校驗方法包括 validateFields 和 validateFieldsAndScroll裡面可以接收校驗欄位陣列, options, 和一個回撥函式*

最常用的15個前端表單驗證JS正則表示式

在表單驗證中，使用正則表示式來驗證正確與否是一個很頻繁的操作，本文收集整理了15個常用的JavaScript正則表示式，非常不錯，具有參考借鑑價值，需要的朋友參考下

vue.js記錄-表單-父元件呼叫子元件的表單驗證

記錄父元件中呼叫子元件的表單驗證子元件實現表單驗證　　子元件中需要實現呼叫表單驗證的方法，子元件OrderInput.vue如下程式碼：

jquery.validate.js的Validate表單驗證

原文連線 https://blog.csdn.net/weixin_42765270/article/details/84591593 validate 一、 validate的使用步驟

案例：正則表示式表單驗證 js小案例

技術標籤：JavaScript正則表示式javascript 案例：正則表示式表單驗證 js小案例功能需求：

分享JS表單驗證原始碼（帶錯誤提示及密碼等級）

相關推薦