正則表達式如何進行頁面表單驗證功能

這篇文章主要為大家展示了“正則表達式如何進行頁面表單驗證功能”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“正則表達式如何進行頁面表單驗證功能”這篇文章吧。

 一般做到注冊頁面的時候，當用戶填完信息，都需要對他們的信息進行驗證，這就要用到正則表達式，具體看下面這個例子。

效果圖：（當用戶填寫的信息不符合規范時顯示錯誤提示）

我只提供了html結構和js，樣式你們按照自己的設計稿自己寫，我是分別給正確的時候和錯誤的時候加了不同的class，用了不同的高度，正確是高度小，可以把提示的紅字隱藏。

html結構：

<div id="wrap">
  <h2>注冊</h2>
  <div>
    <input type="text" class='match' name='user' placeholder='請輸入用戶名' />
    <span>字母開頭,長度5-10位字母數字下劃線</span>
  </div>
  <div>
    <input type="password" class='match' name='pwd' placeholder='請輸入密碼' />
    <span>字母數字長度6-18位</span>
  </div>
  <div>
    <input type="password" name='pwd2' placeholder='請再次輸入密碼' />
    <span>兩次密碼不一致</span>
  </div>
  <div>
    <input type="text" class='match' name="tel" placeholder='請輸入電話' />
    <span>電話號碼格式不正確</span>
  </div>
  <div>
    <input type="text" class='match' name="mail" placeholder='請輸入e-mail' />
    <span>郵箱格式不正確</span>
  </div>
  <div>
    <input type="text" class='match' name="IDCard" placeholder='請輸入身份證' />
    <span>證件格式不正確</span>
  </div>
  <div class='submit'>
    <input type="submit" value='注冊' />
  </div>
  <p id='tip'>請先輸入密碼</p>
</div>

js：

//正則表達式已//雙斜杠開始和結束，限制必須要以什么什么開頭要在之前加^，限制必須要以什么什么結尾要在后面加$，例：/^正則$/
<script type="text/javascript">
  var reg = {
    user:/^[a-zA-Z]\w{4,9}$/,
    //用來判斷用戶名，第一位不能為數字，也就是小寫字母或者大寫字母，后面的內容\w表示字符（數字字母下劃線）
    //要求是5-10位字符，所以出去第一位，還需要4-9位的\w
    pwd:/^[\da-zA-Z]{6,18}$/,
    //用來判斷密碼，html結構中要求是數字字符6到18位，\d表示數字
    tel:/^1[34578]\d{9}$/,
    //用來判斷電話號碼，通常手機號第一位為1，第二位只可能出現3.4.5.7.8，后面剩下的9位數字隨機
    mail:/^[1-9a-zA-Z_]\w*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,})+$/,
    //用來判斷郵箱，通常郵箱沒有以0開頭的，所以第一位為1-9數字或者小寫字母或者大寫字母，第二位開始任意字符
    //也可以只有第一位沒有第二位，*表示至少0個，@后面同理，小寫字母或者大寫字母或者數字，.需要轉意符，所以寫成\.
    //點后面通常是com或者cn或者com.cn，所以是小寫字母或者大寫字母至少兩位
    IDCard:/^[1-9]\d{16}[\dxX]$/,
    //用來判斷身份證，通常第一位不為零，所以取1-9的數字，中間的16位數字隨機，最后一位要么是數字要么是X
  };
  var arr = [
    document.getElementsByName('user')[0],
    document.getElementsByName('pwd')[0],
    document.getElementsByName('tel')[0],
    document.getElementsByName('mail')[0],
    document.getElementsByName('IDCard')[0]
  ];
  for(var i=0;i<arr.length;i++){
    arr[i].onblur = function(){
      if(this.value){
        if(reg[this.name].test(this.value)){
          this.parentNode.className = 'right';  //判斷正確的時候加的class
        }else{
          this.parentNode.className = 'wrong';  //判斷錯誤的時候加的class
          this.focus();
        };
      };
    }; 
  };
  var oTip = document.getElementById('tip');
  var opwd = document.getElementsByName('pwd2')[0];
  opwd.onfous = function(){
    if(!arr[1].value){
      arr[1].focus();
      oTip.className = 'show';
      setTimeout(function () {
        oTip.className = '';
      },1000);
    };
  };
  opwd.onblur = function(){
    if(this.value){
      if(this.value != arr[1].value){
        this.focus();
        this.parentNode.className ='wrong';
      }else{
       this.parentNode.className ='right';
      };
    };
  };
</script>

以上是“正則表達式如何進行頁面表單驗證功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！