检查 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