JS如何使用正則表達(dá)式實(shí)現(xiàn)常用的表單驗(yàn)證功能

這篇文章主要講解了JS如何使用正則表達(dá)式實(shí)現(xiàn)常用的表單驗(yàn)證功能，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

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

設(shè)計(jì)合適的提示信息；

• 正則表達(dá)式篩選錯(cuò)誤輸入。

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

這里先列出我自己常用的正則表達(dá)式，然后在深入全面的學(xué)習(xí)它！

常用正則表達(dá)式

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

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

中文地址（以中文開始，包含英文字符、數(shù)字、括號(hào)）：/^([\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}$/

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

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

手機(jī)：/^1[34578]\d{9}$/

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

通用驗(yàn)證信息提示函數(shù)

  /**
   * @param {Object} $input 需要驗(yàn)證的輸入項(xiàng)
   * @param {String} reg  正則表達(dá)式
   * @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}$/, '*請輸入正確的郵編！');

深入學(xué)習(xí)正則表達(dá)式

1. RegExp對(duì)象

有兩種方法實(shí)例化RegExp對(duì)象

• 字面量

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

• 構(gòu)造函數(shù)

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

2. 修飾符

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

• i：ignore case 忽略大小寫， 默認(rèn)false，只讀

• m：multiple lines 多行搜索 默認(rèn)false，只讀

• lastIndex： 是當(dāng)前表達(dá)式匹配內(nèi)容的最后一個(gè)字符的下一個(gè)位置

• source：正則表達(dá)式的文本字符串

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

   

3. 元字符

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

1. 原義文本字符

   a,b,c,d..

2. 元字符

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

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

4. 字符類

• 我們可以使用元字符 [] 來構(gòu)建一個(gè)簡單的類

所謂類是指符合某些特征的對(duì)象，一個(gè)泛指，不是特指某個(gè)字符

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

• 字符取反（^）

使用元字符 ^ 創(chuàng)建反向類

表達(dá)式[^abc] 表示 不是字符a或b或c的內(nèi)容

5. 范圍類

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

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

   

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

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

   

6.預(yù)定義類及邊界

6.1 預(yù)定義類

6.2 邊界

7. 量詞

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

8.1 貪婪模式

在正則表達(dá)式中，默認(rèn)盡可能多的匹配

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

8.2 非貪婪模式

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

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

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

9. 分組

9.1 分組

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

> '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"

• 忽略分組

  不希望捕獲某些分組，只需要在分組內(nèi)加上 ？：

  (?:Byron).(ok)

看完上述內(nèi)容，是不是對(duì)JS如何使用正則表達(dá)式實(shí)現(xiàn)常用的表單驗(yàn)證功能有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。