检查 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}：恰好匹配三个字符，分别是大写 A-Z 或数字 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}$/

请注意特殊字符^和$。它们对应于字符串的开头和结尾，确保您不会匹配任何仅包含邮政编码的字符串，而只匹配仅包含邮政编码的字符串。

最后，您可以按如下方式编写此函数：

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