inputpattern——正則表達式的奇妙用途

一、正則表達式簡介

在計算機科學中，正則表達式是描述字符模式的一種語言。原本用於unix類操作系統的文本編輯器vi，現在幾乎所有的編程語言都支持正則表達式。它可以應用於文本匹配、搜索、替換、數據分離等。

形式上，「正則表達式」就是一個（或多個）字符序列，其表示一個字符串集合。

在正則表達式中，我們常用到的元字符有：^、$、\、.、[ ]、( )、{ }、|。

^匹配字符串的開始；$匹配字符串的結束；\是轉義符；.匹配除了換行符以外的任意字符；[ ]匹配括號內的任意字符；( )捕獲匹配的內容；{ }匹配指定次數；|匹配兩項中的任意一項。

二、inputpattern的基礎用法

在HTML表單中，我們常常需要驗證用戶輸入的數據格式是否正確。比如，驗證用戶輸入的電子郵件地址、密碼、手機號碼是否符合規則。為此，HTML5中新增了inputpattern屬性，可以通過正則表達式驗證用戶輸入的數據是否合法。

inputpattern的基礎用法很簡單，只需要在input標籤中加入pattern屬性，並給定正則表達式即可。例如，下面的代碼實現了驗證用戶輸入的手機號碼是否為11位數字：

<input type="tel" pattern="[0-9]{11}" required>

上述代碼中，「[ ]」表示匹配括號內的任意字符，「0-9」表示匹配數字，「{11}」表示匹配11次。因此，該正則表達式表示匹配11位數字。

三、inputpattern常用的正則表達式

除了驗證手機號碼之外，inputpattern還可以用來驗證其他常見的數據格式。比如：

1.驗證電子郵件地址

電子郵件地址的格式很多，一般包含用戶名、域名和頂級域名。下面是一個簡單的驗證用戶輸入的電子郵件地址是否合法的正則表達式：

<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>

上述代碼中，「+」表示匹配一次或多次，「\.」表示匹配句點字面量，「{2,}」表示匹配2次或多次。因此，該正則表達式表示匹配符合電子郵件地址格式的字符串。

2.驗證密碼

密碼是用戶賬號的重要組成部分，確保其安全性是很有必要的。下面是一個簡單的密碼格式驗證的正則表達式：

<input type="password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\S]{8,}" required>

上述代碼中，「(?=.*[a-z])」表示至少包含一個小寫字母，「(?=.*[A-Z])」表示至少包含一個大寫字母，「(?=.*\d)」表示至少包含一個數字，「[\S]{8,}」表示匹配8個及以上的非空格字符。因此，該正則表達式表示匹配符合密碼格式的字符串。

3.驗證網址

網址的格式也很多，不同的網址可能包含不同的協議、域名和路徑。下面是一個簡單的驗證用戶輸入的網址是否合法的正則表達式：

<input type="url" pattern="((https?|ftp|file)?://)?([\da-z.-]+)\.([a-z.]{2,6})([/\w.-]*)*/?" required>

上述代碼中，「((https?|ftp|file)?://)?」表示匹配協議，「([\da-z.-]+)」和「([a-z.]{2,6})」分別表示匹配域名和頂級域名，「[/\w.-]*」表示匹配路徑。因此，該正則表達式表示匹配符合網址格式的字符串。

四、inputpattern的高級用法

除了基礎的數據格式驗證之外，inputpattern還可以實現其他高級的用途。比如，可以實現根據前一項的值動態驗證下一項。

假設有兩個表單項：密碼和確認密碼。當用戶在第一個表單項（密碼）中輸入值時，第二個表單項（確認密碼）應該動態驗證該值是否與第一個表單項（密碼）一致。可以通過JavaScript動態生成驗證規則，並將其賦給inputpattern屬性實現動態驗證。

<form>
  <input id="password" type="password" placeholder="密碼">
  <input id="confirm-password" type="password" placeholder="確認密碼">
</form>

<script>
  const password = document.querySelector('#password');
  const confirmPassword = document.querySelector('#confirm-password');
  
  password.addEventListener('input', () => {
    const passwordValue = password.value;
    confirmPassword.pattern = `^${passwordValue}$`;
  });
</script>

上述代碼中，當用戶在密碼錶單項中輸入值時，會動態生成一個驗證規則，並將其賦給確認密碼錶單項的inputpattern屬性。該規則用於驗證確認密碼是否與密碼一致。

五、小結

inputpattern是一個非常有用的工具，可以幫助我們快速、簡便地驗證用戶輸入的數據格式是否合法。除了基礎的數據格式驗證之外，inputpattern還可以實現其他高級的用途，例如動態驗證、根據用戶不同的輸入進行不同的驗證等等。

希望本文對你有所幫助。