檢查 javascript 中的輸入以查看它是否與加拿大郵政編碼匹配

Question

我正在創建一個表單以獲取有關 html 和 javascript 中的用戶的信息，並且我正在努力檢查我的一個文本框輸入是否為特定格式。

格式為： ### ###

如果每個#是字母或數字，則N3H 2E9就是一個例子。

我的輸入來自常規的 html 文本框，該文本框正在我的 javascript 中轉換為 const，我想知道是否有辦法驗證輸入的格式是否與前面提到的格式相同。 我對 html 和 javascript 很陌生，所以如果您回答，請您在回答后提供一個小的解釋嗎？

Answer 1

您可以使用正則表達式 (RegEx)來做您想做的事。

 const correctInput = "N3H 2E9"; const incorrectInput = "N3H 2Ea"; const isValid = (input) => /^[0-9A-Z]{3} [0-9A-Z]{3}$/.test(input); console.log(isValid(correctInput)); console.log(isValid(incorrectInput));

/^[0-9A-Z]{3} [0-9A-Z]{3}$/

• ^ : 匹配字符串的開頭
• [0-9A-Z]{3} ：精確匹配三個字符，它們是大寫 AZ 或數字 0-9 之一
• : 匹配空間
• $ : 匹配字符串的結尾

Answer 2

 function validateForm() { var postalCode = document.getElementById("postal_code").value; // This solution uses a regular expression to test the input for our desired format // for more info on what this pattern means exactly, check out // https://regex101.com/?regex=^[A-Z0-9]{3}%20[A-Z0-9]{3}$ var rgx = /^[A-Z0-9]{3} [A-Z0-9]{3}$/; var isValid = rgx.test(postalCode); var resultElement = document.getElementById("result"); if (isValid) { resultElement.innerText = "Valid" } else { resultElement.innerText = "Invalid" } }

 <input type="text" id="postal_code"> <button onclick="validateForm()">Validate</button> <span id="result">Invalid</span>

Answer 3

使用正則表達式最容易做到這一點。 正則表達式定義了可以測試輸入的字符模式。 在 javascript 中，您可以創建一個，如下所示：

const expression = /test/

expression現在是一個正則表達式，您可以使用它來驗證字符串（在這種情況下，測試它的一部分是否包含"test" ）：

expression.test("Hello") // false
expression.test("test") // true
expression.test("Hello this is a test") // true
expression.test("Hey I'm testing") // true
expression.test("t est") // false
expression.test("Test") // false

正則表達式可以包含特殊選擇器，這些選擇器定義的不是文字字符串（例如"test" ），而是一系列允許的字符。 在您的示例中，您想針對數字和大寫字母進行測試。 這可以表示為[A-Z0-9]意思是“A 和 Z 之間或 0 和 9 之間的任何字符” 。 您需要其中三個，可以表示為[A-Z0-9][A-Z0-9][A-Z0-9]或簡單地表示為[A-Z0-9]{3} 。 最終表達式如下所示：

const expression = /^[A-Z0-9]{3} [A-Z0-9]{3}$/

注意特殊字符^和$ 。 它們對應於字符串的開頭和結尾，確保您不匹配任何僅包含郵政編碼的字符串，而僅匹配僅包含郵政編碼的字符串。

最后，您可以將這個 function 編寫如下：

const isCanadianPostalCode = input => /^[A-Z0-9]{3} [A-Z0-9]{3}$/.test(input);

console.log( isCanadianPostalCode('N3H 2E9A') ) // false
console.log( isCanadianPostalCode('N3H 2E9') ) // true