Home / Questions / 113127
Accepted
Eduardo Sebastian
Asked: 2020-10-29 18:12:35 +0800 CST 2020-10-29 18:12:35 +0800 CST

正则表达式错误：“字符类中的范围乱序”

  • 772

我正在使用正则表达式来防止将字母以外的字符写入文本区域：

/[A-Za-Z]/ig

但它抛出了这个与正则表达式相关的错误：

字符类中的范围乱序

为什么会这样？

window.addEventListener("DOMContentLoaded", checker);


function checker() {
  var textArea = document.getElementsByTagName("textarea");
  for (let element of textArea) {
    element.addEventListener("keypress", event => {
      var letra = "which" in event ? event.which : event.keyCode,
        patron = /[A-Za-Z]/ig;
      if (!patron.test(letra)) {
        event.preventDefault();
        return false;
      }
    });
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <textarea cols="40" rows="10"></textarea></textarea>
</body>

</html>

javascript

2 Answers

  1. Best Answer

    错误“字符类中的范围乱序”表示在字符类中，有一个范围颠倒了。在字符类中，您可以使用任何范围，例如[!-z]，[#-@]或任何您想要的，只要第一个字符值小于第二个字符值。
    - 我们通常谈论ASCII 码，因为基本拉丁块是我们使用最多的一个，但它也适用于 Unicode 中的任何码点值，而不仅仅是 0 到 127 之间最常见的码点值。

    ASCII 表


    产生错误的原因有 3 个：

    1. 你想包括 a -，但它没有被转义。
      示例：当您想匹配其中一个符号[,-!"#]时，必须对连字符进行转义，以免生成范围，例如[,\-!"#]（或在类的开头或结尾，它永远不是范围）。
    2. 您正在使用方括号，但您不想拥有字符类。
      示例：要匹配文本"[ax - b]"，必须对前括号进行转义，以便它不会生成类，例如\[ax - b].
    3. 完全是向后的范围，通常是由于大写错误，例如[a-Z].


    在您的情况下，a-Z这是错误的，因为 laa的值为 97 而 laZ的值为 90 （它是向后的）。相反，它可以是，[Z-a]其中包括字符Z、[、\、]、^、_和。-我知道，这可能只是一个错字，但我想解释一下。`a

    匹配从 a 到 z 的大写或小写字母的正则表达式是/^[A-Za-z]$/.
    或者，有什么相同的（如果我们使用开关/i忽略大小写）：
    /^[a-z]$/i

    但我们不要忘记西班牙语中的ñ和重音元音：

    /^[a-záéíóúüñ]$/i


    旁注：对按键事件进行验证已成为过去。
    不推荐，不再使用，主要有两个原因：

    1. 目前，许多文本输入都没有按键。手机没有按键，或者当您复制和粘贴文本时，您也没有发送按键......而且这些都不会触发按键事件。
      - 做测试，在你的手机上打开这个页面，你会看到你的问题代码没有触发事件，因此不会显示错误。

    2. 并且不再习惯禁止任何东西进入。你还记得任何阻止你输入角色的专业页面吗？相反，通常所做的是允许一切，并在不正确时用某种颜色标记或显示小消息。此外，通常不会在键入时检查它，而是在失去焦点或提交表单时检查。


    一个简单的替代方法（特别是看到您已经将文档类型定义为 HTML5）是使用输入的模式属性。它涉及将 textarea 更改为输入，但由于您不允许空格或换行符，因此看起来合乎逻辑......再见代码！

    input[type=text] {
    width: 40ch;
}
input:invalid {
    border: 2px solid red;
}
    <form action="https://isstatic.aoverflow.com/YQUj9m.jpg">
  <input type="text"
         placeholder="Ingrese el texto"
         pattern="[a-záéíóúüñA-ZÁÉÍÓÚÜÑ]*"
         title="Sólo letras de la 'a' a la 'z'"
  >
  <br>
  <input type="submit"
         value="Probar"
  >
</form>

    • 目前大多数现代浏览器 (IE10+) 都支持它
      （参见兼容性）。


    但是，如果您有兴趣了解如何验证文本区域，我建议您阅读表单数据验证 (MDN)。

    或者，如果这个想法真的是要控制每个更改，那么要考虑的事件是：提交、模糊和 输入。

    • 3

  2. 正则表达式错误是因为您在字符AZ和aZ中包含了 ，并且没有字符范围aZ但az。

    另外，正如我看到的代码，您必须使用 event.key

    修改后的代码：

    window.addEventListener("DOMContentLoaded",checker);


function checker(){
 var textArea = document.getElementsByTagName("textarea");
 for (let element of textArea) {
  element.addEventListener("keypress", event => {
  var letra = event.key,
      patron = /[A-Z]/ig;
  if(!patron.test(letra)) {
    event.preventDefault();
    return false;
  }  
  });
 }
}
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<textarea cols="40" rows="10"></textarea></textarea>
</body>
</html>

    • 1