主頁 >  其他 > JS表單驗證原始碼（帶錯誤提示及密碼等級）

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

2020-09-11 01:27:14 其他

先曬圖

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>意見反饋&nbsp;&nbsp;<a href="#">test@com</a></span>
            <span>您好，請<a href="#">&nbsp;登錄</a>&nbsp;&nbsp;|&nbsp;&nbsp;<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 &copy; 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.valuehttps://www.cnblogs.com/mtxcat/p/==''){
        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.valuehttps://www.cnblogs.com/mtxcat/p/==''){
        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.valuehttps://www.cnblogs.com/mtxcat/p/==''){
        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.valuehttps://www.cnblogs.com/mtxcat/p/==''){
        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.valuehttps://www.cnblogs.com/mtxcat/p/==''){
        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.valuehttps://www.cnblogs.com/mtxcat/p/==''){
        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.valuehttps://www.cnblogs.com/mtxcat/p/==''){
        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 =https://www.cnblogs.com/mtxcat/p/="") {
        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 =https://www.cnblogs.com/mtxcat/p/="") {
        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 =https://www.cnblogs.com/mtxcat/p/="") {
        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 =https://www.cnblogs.com/mtxcat/p/="") {
        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 =https://www.cnblogs.com/mtxcat/p/="") {
        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 =https://www.cnblogs.com/mtxcat/p/="") {
        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 =https://www.cnblogs.com/mtxcat/p/="") {
        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(" 登 記 成 功 ! ")
    }
};

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/3854.html

標籤：其他

上一篇：react 報紅錯誤匯總

下一篇：標簽物件-自定義屬性-傳值

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 網閘典型架構簡述

    網閘架構一般分為兩種：三主機的三系統架構網閘和雙主機的2+1架構網閘。 三主機架構分別為內端機、外端機和仲裁機。三機無論從軟體和硬體上均各自獨立。首先從硬體上來看，三機都用各自獨立的主板、記憶體及存盤設備。從軟體上來看，三機有各自獨立的作業系統。這樣能達到完全的三機獨立。對于“2+1”系統，“2”分為 ......

    uj5u.com 2020-09-10 02:00:44 more
  • 如何從xshell上傳檔案到centos linux虛擬機里

    如何從xshell上傳檔案到centos linux虛擬機里及：虛擬機CentOs下執行 yum -y install lrzsz命令，出現錯誤：鏡像無法找到軟體包 前言 一、安裝lrzsz步驟 二、上傳檔案 三、遇到的問題及解決方案 總結 前言 提示：其實很簡單，往虛擬機上安裝一個上傳檔案的工具 ......

    uj5u.com 2020-09-10 02:00:47 more
  • 一、SQLMAP入門

    一、SQLMAP入門 1、判斷是否存在注入 sqlmap.py -u 網址/id=1 id=1不可缺少。當注入點后面的引數大于兩個時。需要加雙引號， sqlmap.py -u "網址/id=1&uid=1" 2、判斷文本中的請求是否存在注入 從文本中加載http請求，SQLMAP可以從一個文本檔案中 ......

    uj5u.com 2020-09-10 02:00:50 more
  • Metasploit 簡單使用教程

    metasploit 簡單使用教程 浩先生， 2020-08-28 16:18:25 分類專欄： kail 網路安全 linux 文章標簽： linux資訊安全 編輯 著作權 metasploit 使用教程 前言 一、Metasploit是什么？ 二、準備作業 三、具體步驟 前言 Msfconsole ......

    uj5u.com 2020-09-10 02:00:53 more
  • 游戲逆向之驅動層與用戶層通訊

    驅動層代碼： #pragma once #include <ntifs.h> #define add_code CTL_CODE(FILE_DEVICE_UNKNOWN,0x800,METHOD_BUFFERED,FILE_ANY_ACCESS) /* 更多游戲逆向視頻www.yxfzedu.com ......

    uj5u.com 2020-09-10 02:00:56 more
  • 北斗電力時鐘（北斗授時服務器）讓網路資料更精準

    北斗電力時鐘（北斗授時服務器）讓網路資料更精準 北斗電力時鐘（北斗授時服務器）讓網路資料更精準 京準電子科技官微——ahjzsz 近幾年，資訊技術的得了快速發展，互聯網在逐漸普及，其在人們生活和生產中都得到了廣泛應用，并且取得了不錯的應用效果。計算機網路資訊在電力系統中的應用，一方面使電力系統的運行 ......

    uj5u.com 2020-09-10 02:01:03 more
  • 【CTF】CTFHub 技能樹 彩蛋 writeup

    ?碎碎念 CTFHub：https://www.ctfhub.com/ 筆者入門CTF時時剛開始刷的是bugku的舊平臺，后來才有了CTFHub。 感覺不論是網頁UI設計，還是題目質量，賽事跟蹤，工具軟體都做得很不錯。 而且因為獨到的金幣制度的確讓人有一種想去刷題賺金幣的感覺。 個人還是非常喜歡這個 ......

    uj5u.com 2020-09-10 02:04:05 more
  • 02windows基礎操作

    我學到了一下幾點 Windows系統目錄結構與滲透的作用 常見Windows的服務詳解 Windows埠詳解 常用的Windows注冊表詳解 hacker DOS命令詳解（net user / type /md /rd/ dir /cd /net use copy、批處理 等） 利用dos命令制作 ......

    uj5u.com 2020-09-10 02:04:18 more
  • 03.Linux基礎操作

    我學到了以下幾點 01Linux系統介紹02系統安裝，密碼啊破解03Linux常用命令04LAMP 01LINUX windows： win03 8 12 16 19 配置不繁瑣 Linux：redhat,centos(紅帽社區版)，Ubuntu server,suse unix:金融機構，證券，銀 ......

    uj5u.com 2020-09-10 02:04:30 more
  • 05HTML

    01HTML介紹 02頭部標簽講解03基礎標簽講解04表單標簽講解 HTML前段語言 js1.了解代碼2.根據代碼 懂得挖掘漏洞 （POST注入/XSS漏洞上傳）3.黑帽seo 白帽seo 客戶網站被黑帽植入劫持代碼如何處理4.熟悉html表單 <html><head><title>TDK標題，描述 ......

    uj5u.com 2020-09-10 02:04:36 more
最新发布
  • 2023年最新微信小程式抓包教程

    01 開門見山 隔一個月發一篇文章，不過分。 首先回顧一下《微信系結手機號資料庫被脫庫事件》，我也是第一時間得知了這個訊息，然后跟蹤了整件事情的經過。下面是這起事件的相關截圖以及近日流出的一萬條資料樣本： 個人認為這件事也沒什么，還不如關注一下之前45億快遞資料查詢渠道疑似在近日復活的訊息。 訊息是 ......

    uj5u.com 2023-04-20 08:48:24 more
  • web3 產品介紹：metamask 錢包 使用最多的瀏覽器插件錢包

    Metamask錢包是一種基于區塊鏈技術的數字貨幣錢包，它允許用戶在安全、便捷的環境下管理自己的加密資產。Metamask錢包是以太坊生態系統中最流行的錢包之一，它具有易于使用、安全性高和功能強大等優點。 本文將詳細介紹Metamask錢包的功能和使用方法。 一、 Metamask錢包的功能 數字資 ......

    uj5u.com 2023-04-20 08:47:46 more
  • vulnhub_Earth

    前言 靶機地址->>>vulnhub_Earth 攻擊機ip：192.168.20.121 靶機ip：192.168.20.122 參考文章 https://www.cnblogs.com/Jing-X/archive/2022/04/03/16097695.html https://www.cnb ......

    uj5u.com 2023-04-20 07:46:20 more
  • 從4k到42k，軟體測驗工程師的漲薪史，給我看哭了

    清明節一過，盲猜大家已經無心上班，在數著日子準備過五一，但一想到銀行卡里的余額……瞬間心情就不美麗了。最近，2023年高校畢業生就業調查顯示，本科畢業月平均起薪為5825元。調查一出，便有很多同學表示自己又被平均了。看著這一資料，不免讓人想到前不久中國青年報的一項調查：近六成大學生認為畢業10年內會 ......

    uj5u.com 2023-04-20 07:44:00 more
  • 最新版本 Stable Diffusion 開源 AI 繪畫工具之中文自動提詞篇

    🎈 標簽生成器 由于輸入正向提示詞 prompt 和反向提示詞 negative prompt 都是使用英文，所以對學習母語的我們非常不友好 使用網址：https://tinygeeker.github.io/p/ai-prompt-generator 這個網址是為了讓大家在使用 AI 繪畫的時候 ......

    uj5u.com 2023-04-20 07:43:36 more
  • 漫談前端自動化測驗演進之路及測驗工具分析

    隨著前端技術的不斷發展和應用程式的日益復雜，前端自動化測驗也在不斷演進。隨著 Web 應用程式變得越來越復雜，自動化測驗的需求也越來越高。如今，自動化測驗已經成為 Web 應用程式開發程序中不可或缺的一部分，它們可以幫助開發人員更快地發現和修復錯誤，提高應用程式的性能和可靠性。 ......

    uj5u.com 2023-04-20 07:43:16 more
  • CANN開發實踐：4個DVPP記憶體問題的典型案例解讀

    摘要：由于DVPP媒體資料處理功能對存放輸入、輸出資料的記憶體有更高的要求（例如，記憶體首地址128位元組對齊），因此需呼叫專用的記憶體申請介面，那么本期就分享幾個關于DVPP記憶體問題的典型案例，并給出原因分析及解決方法。 本文分享自華為云社區《FAQ_DVPP記憶體問題案例》，作者：昇騰CANN。 DVPP ......

    uj5u.com 2023-04-20 07:43:03 more
  • msf學習

    msf學習 以kali自帶的msf為例 一、msf核心模塊與功能 msf模塊都放在/usr/share/metasploit-framework/modules目錄下 1、auxiliary 輔助模塊，輔助滲透（埠掃描、登錄密碼爆破、漏洞驗證等） 2、encoders 編碼器模塊，主要包含各種編碼 ......

    uj5u.com 2023-04-20 07:42:59 more
  • Halcon軟體安裝與界面簡介

    1. 下載Halcon17版本到到本地 2. 雙擊安裝包后 3. 步驟如下 1.2 Halcon軟體安裝 界面分為四大塊 1. Halcon的五個助手 1) 影像采集助手：與相機連接，設定相機引數，采集影像 2) 標定助手：九點標定或是其它的標定，生成標定檔案及內參外參，可以將像素單位轉換為長度單位 ......

    uj5u.com 2023-04-20 07:42:17 more
  • 在MacOS下使用Unity3D開發游戲

    第一次發博客，先發一下我的游戲開發環境吧。 去年2月份買了一臺MacBookPro2021 M1pro(以下簡稱mbp)，這一年來一直在用mbp開發游戲。我大致分享一下我的開發工具以及使用體驗。 1、Unity 官網鏈接： https://unity.cn/releases 我一般使用的Apple ......

    uj5u.com 2023-04-20 07:40:19 more

Copyright © 2010-2020 有解無憂