91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2020-07-29 13:02:43 來源:億速云 閱讀:134 作者:小豬 欄目:web開發

這篇文章主要講解了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 預定義類
字符等價類含義
.[^\r\n]除了回車符和換行符以外的所有字符
\d[0-9]數字字符
\D[^0-9]非數字字符
\s[\t\n\x0B\f\r]空白字符
\w[a-zA-Z_0-9]單詞字符(字母數字下劃線)
\W[^a-zA-Z0-9_]非單詞字符
6.2 邊界
字符含義
^以XXXXX開始
$以xxxx結束
\b單詞邊界
\B非單詞邊界

7. 量詞

字符含義
出現零次或一次(最多出現1次)
+出現一次或多次
*出現零次或多次(任意
{n}出現n次
{n,m}出現n到m次
{n,}至少出現n次

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

8.1 貪婪模式

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

> '1234678'.replace(/\d{3,6}/g, 'X')
< "X78"
8.2 非貪婪模式

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

做法很簡單,在量詞后面加一個 ?即可

> '123456789'.match(/\d{3,5}&#63;/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"
  • 忽略分組

    不希望捕獲某些分組,只需要在分組內加上 ?:

    (&#63;:Byron).(ok)

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

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

js
AI

恩平市| 右玉县| 清流县| 宁海县| 灵璧县| 海林市| 高碑店市| 通化市| 常宁市| 新泰市| 河东区| 古交市| 巴彦淖尔市| 普宁市| 阿坝县| 宜君县| 紫阳县| 曲松县| 丹凤县| 贵州省| 遂宁市| 河池市| 柘荣县| 柳林县| 永胜县| 铁岭市| 东方市| 西平县| 延寿县| 玉树县| 东山县| 民丰县| 沂南县| 平塘县| 晋中市| 宁津县| 贡山| 淮安市| 林州市| 开原市| 盘山县|