Home / Questions / 17308
Accepted
Wuilmer Medrano
Asked: 2020-07-21 13:54:57 +0800 CST 2020-07-21 13:54:57 +0800 CST

屏蔽输入文本 javascript

  • 772

我想用以下格式屏蔽输入文本：Aa-1234，其中 2 个字母是美国各州的首字母，用连字符分隔，4 个数字是 4 位邮政编码：我该怎么做javascript？

javascript

3 Answers

  1. Best Answer

    你试过这个 JQuery 库吗？

    http://digitalbush.com/projects/masked-input-plugin/

    它完全符合您的要求。它不验证用户输入，它input text使用您传递给它的掩码格式化输入数据。

    在您的情况下，它将被实例化如下：

    $("#id_input").mask("aa-9999");
    • 4

  2. 我不太明白您所说的掩码是什么意思，但我认为您的目的是验证用户通过输入提供的文本是否具有您想要的格式，在这种情况下，它类似于“us-1234”或“我们- 2375”等 要验证给定字符串是否满足所需格式，您可以使用正则表达式。

    对上述格式建模的正则表达式如下：

    ^us-(\d{4})$

    上面的意思是在字符串的开头必须有字母 u 后跟一个 s 和一个连字符，然后是 0-9 之间的 4 个数字，字符串的结尾是 $ 符号。

    为了在您的应用程序中使用它，您需要按以下方式使用它：

     exprZip = /^us-(\d{4})$/;   //tu expresión regular
 exprZip.test(textoInput);   //pruebas la expresión regular con la cadena que leiste del input y la función regresará true o false.
    • 1

  3. 在 中，input您可以将属性pattern与正则表达式一起使用，以确保输入具有您想要的格式。缺点是它还没有被所有浏览器支持：它适用于 Chrome、Firefox、Opera 或 IE10+，但不适用于 Safari。

    所以你要做的就是找到一个适合你想要的正则表达式。这个想法是这样的：

    • 2个字母（可以是任何你想要的，但这会使正则表达式复杂化）
    • 1 个连字符
    • 5 位数字（尽管在您说 4 的问题中，美国邮政编码有 5 位数字）

    所以你可以有一个像这样的正则表达式：^[a-zA-Z]{2}-[0-9]{5}$它与属性结合起来pattern看起来像这样：

    <form>
  <input type="text" pattern="^[a-zA-Z]{2}-[0-9]{5}$" placeholder="ll-ddddd" />
  <button>Enviar</button>
</form>

    另一种选择（以防它pattern不起作用）是使用 JavaScript，使用相同的正则表达式。提交表单时，将使用 JavaScript 检查该字段是否符合您想要的格式，如果不符合，则显示错误消息并且不发送。

    在 JavaScript 中，它看起来像这样：

    document.getElementById("miform").addEventListener("submit", function(e) {
  var estado = document.getElementById("estado-cp").value;
  if (estado.match("^[a-zA-Z]{2}-[0-9]{5}$")) {
    alert("Cumple el patron");
  } else {
    alert("No cumple el patron");
    e.preventDefault(); // no se envia el formulario
  }
});
    <form id="miform">
  <input type="text" id="estado-cp" />
  <button>Enviar</button>
</form>

    现在，知道州的数量是有限的（50 个）并且存在一些特殊情况（领土、外国代码），您可以进一步将允许的两个字母限制为有效的字母（例如：AL、 AK , TX...) 和正则表达式可能是这样的：

    ^[AL|AK|AS|AZ|AR|CA|CO|CT|DE|DC|FL|GA|GU|HI|ID|IL|IN|IA|KS|KY|LA|ME|MD|MH|MA|MI|FM|MN|MS|MO|MT|NE|NV|NH|NJ|NM|NY|NC|ND|MP|OH|OK|OR|PW|PA|PR|RI|SC|SD|TN|TX|UT|VT|VA|VI|WA|WV|WI|WY]{2}-[0-9]{5}$
    • 1