JS Regex允许不正确的字符

问题描述

我有SEPA付款的评论字段，这样的字段在用户可以输入的内容方面有以下限制：

I have a comments field for SEPA payments and such a field has the following restrictions when it comes to what a user can type:

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9
/ – ? : ( ) . , ‘ +
Space

所以我有这个函数来简单地阻止用户输入它不允许：

So I have this function to simply block the users input when it is not allowed:

    $('.no_special_chars').keypress(function (e) {
        var regex = new RegExp("^[a-zA-Z0-9\/\-\?\:\(\)\.\,\'\+\\s]+?$");
        console.log(String.fromCharCode(!e.charCode ? e.which : e.charCode));
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);

        // Allow tab, left/right arrow, backspace and delete. Then proceed to validation
        if (e.keyCode == 9 || e.keyCode == 37 || e.keyCode == 39 || e.keyCode == 8 || e.keyCode == 46) {
            return true;
        }

        // Do not allow returns in the comment field
        if (e.keyCode == 13) {
            return false;
        }

        if (regex.test(str)) {
            return true;
        }

        return false;
    });

但是，我注意到Chrome例如也允许使用以下字符：
％
=
<
>
Firefox也接受所有这些，减去％。

However, I notice that Chrome for example also allows the following characters: % = < >And Firefox accepts all of these as well, minus the %.

我做错了什么以及为什么这些浏览器会有不同的反应？

What am I doing wrong and why do these browsers respond differently?

推荐答案

问题是由于您通过RegExp构造函数声明正则表达式的方式。连字符应该被转义两次以在那里被视为字面连字符。

The problem is due to the way you declared the regex via a RegExp constructor. The hyphen should be escaped twice to be treated as a literal hyphen there.

这是它允许的范围：

建议您从一开始就知道正则表达式时使用文字表示法，最佳做法是在字符类范围的末尾使用连字符以避免转义。

It is advised to use a literal notation when your regex is known from the start, and best practice is to use the hyphen at the end of the character class range in order to avoid escaping it.

要匹配范围内的0个或更多字符，您需要使用

To match 0 or more characters in your range, you need to use

var regex = /^[a-z0-9\/?:().,\'+\s-]*$/i;

请参阅

如果您打算匹配至少1（或更多），请保留 +？（或 + ，它会以同样的方式工作）量词。

If you plan to match at least 1 (or more), keep your +? (or +, it will work the same way in your case) quantifier.

$('.no_special_chars').keypress(function (e) {
  var regex = /^[a-z0-9\/?:().,\'+\s-]*$/i;
  console.log(String.fromCharCode(!e.charCode ? e.which : e.charCode));
  var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);

  // Allow tab, left/right arrow, backspace and delete. Then proceed to validation
  if (e.keyCode == 9 || e.keyCode == 37 || e.keyCode == 39 || e.keyCode == 8 || e.keyCode == 46) {
     return true;
  }

  // Do not allow returns in the comment field
  if (e.keyCode == 13) {
     return false;
  }

  if (regex.test(str)) {
     return true;
  }

  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="no_special_chars">
<input type="text" class="form-control" id="id_number" name="id_number" maxlength="20" required>
</div>

这篇关于JS Regex允许不正确的字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！