JS如何使用正則表達式實現常用的表單驗證功能

這篇文章主要講解了JS如何使用正則表達式實現常用的表單驗證功能，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

表單驗證是一個網站或應用的重點，一條合適的錯誤提示不僅可以減少無效信息錄入，更會給用戶留下良好的使用體驗。但表單設計千差萬別，用戶輸入更不可控。一方面，我們要減少出錯提示（這會引起用戶反感），而另一方面，我們則希望得到足夠多的有效信息。魚和熊掌如何兼得？

設計合適的提示信息；

• 正則表達式篩選錯誤輸入。

如何將錯誤信息合適的展示給用戶，我想是見仁見智，需要根據具體項目具體分析（參考淘寶、京東等電商設計）。這里主要討論第二種方案：通過正則表達式最大限度的過濾用戶輸入

這里先列出我自己常用的正則表達式，然后在深入全面的學習它！

常用正則表達式

文本輸入（拒絕表情）：/^[\u4e00-\u9fa5\w]+.*$/gi

密碼： /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/

中文地址（以中文開始，包含英文字符、數字、括號）：/^([\u4e00-\u9fa5])+[\u4e00-\u9fa5a-zA-Z0-9()（）]*$/

身份證：/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i

電子郵箱：/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

傳真：/^(\d{3,4}-)?\d{7,8}$/

網址：/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)*(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/

座機：/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/

手機：/^1[34578]\d{9}$/

郵編：/^[1-9][0-9]{5}$/

通用驗證信息提示函數

  /**
   * @param {Object} $input 需要驗證的輸入項
   * @param {String} reg  正則表達式
   * @param {String} tips 提示信息
   */
  function isInfoValid($input, reg, tips) {
   var val = $input.val().trim();
   if(val == '') {
    $input.next().remove();
    $input.after('<span class="valid-error">*'+$input.siblings("label").text().trim()+'不能為空！<span>')
   }
   else if(reg && tips && !reg.test(val)) {
    $input.next().remove();
    $input.after('<span class="valid-error">'+ tips +'</span>')
   }else {
    $input.next().remove();
   }
  }

  // 可以這樣使用

  isInfoValid($zipCode, /^[1-9][0-9]{5}$/, '*請輸入正確的郵編！');

深入學習正則表達式

1. RegExp對象

有兩種方法實例化RegExp對象

• 字面量

  var reg = /\bis\b/g; // 全局匹配單詞is

• 構造函數

  var reg = new RegEXP('\\bis\\b',g)

2. 修飾符

• g：global全文搜索，不添加，搜索到第一個匹配停止 默認false，只讀

• i：ignore case 忽略大小寫， 默認false，只讀

• m：multiple lines 多行搜索 默認false，只讀

• lastIndex： 是當前表達式匹配內容的最后一個字符的下一個位置

• source：正則表達式的文本字符串

  > var reg1 = /\w/gim;
  > reg1.source
  < "\w"

   

3. 元字符

正則表達式由兩種基本字符類型組成：

1. 原義文本字符

   a,b,c,d..

2. 元字符

   *+？$ ^ . | \ （ ）{ } [ ]

   \t	水平制表符
   \v	垂直制表符
   \n	換行符
   \r	回車符
   \0	空字符
   \f	換頁符

4. 字符類

• 我們可以使用元字符 [] 來構建一個簡單的類

所謂類是指符合某些特征的對象，一個泛指，不是特指某個字符

表達式[abc]把字符a或b或c歸為一類，表達式可以匹配這類字符

• 字符取反（^）

使用元字符 ^ 創建反向類

表達式[^abc] 表示 不是字符a或b或c的內容

5. 范圍類

• 使用[a-z]來連接兩個字符表示從a到z的任意字符，閉區間，包含a 和 z 本身

  > 'a1b2c3b4'.replace(/[a-z]/g, 'Q');
  < "Q1Q2Q3Q4"

   

• 范圍類可以連寫 [a-zA-Z]

  > '2015-11-5'.replace(/[0-9-]/g, 'A')
  < "AAAAAAAAA"

   

6.預定義類及邊界

6.1 預定義類

6.2 邊界

7. 量詞

8.貪婪模式與非貪婪模式

8.1 貪婪模式

在正則表達式中，默認盡可能多的匹配

> '1234678'.replace(/\d{3,6}/g, 'X')
< "X78"

8.2 非貪婪模式

讓正則表達誰盡可能少的匹配，也就是說一旦成功匹配就不再繼續嘗試

做法很簡單，在量詞后面加一個 ？即可

> '123456789'.match(/\d{3,5}?/g)
< ["123","456","789"]

9. 分組

9.1 分組

使用 （）可以達到分組的功能，使量詞作用于分組

> 'fayfayfayfsd'.replace(/(fay){3}/g, 'X')
< "Xfsd"

9.2 或

使用 | 表示 或

> 'ByronCasper'.replace(/Byron|Casper/g, 'X')
< "XX"

9.3 $引用，捕獲分組

• 注意： 一定要加（），用$捕獲分組

> '2016-11-05'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2-$3-$1')
< "05-11-2016"

• 忽略分組

  不希望捕獲某些分組，只需要在分組內加上 ？：

  (?:Byron).(ok)

看完上述內容，是不是對JS如何使用正則表達式實現常用的表單驗證功能有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。