javascript - 使用粘贴时有效的 html 输入验证

Question

我使用以下代码进行验证，它只允许字母和数字以及一些允许的字符。

$('input').bind('keypress', function (event) {
    var regex = new RegExp("^[a-zA-Z0-9%()#@-_& ]+$");
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
       event.preventDefault();
       return false;
    }
});

我遇到的唯一问题是，如果您复制并粘贴任何不允许的字符，那么这并不能阻止它。我知道我已经在某个地方看到过这样做，它可以防止粘贴字符。有什么想法吗？

Answer 1

你必须做两件事:

1. 绑定(bind)paste事件(上面已经提到)
2. 修复您的 regex 允许 @ 和 _ 之间的字符(所有字母和一些字符，如 ^, [... 因为你没有转义连字符，它创建了一个范围 [@-_]，这是有效的(这就是您没有收到任何错误的原因)，但这不是您所期望的。

固定代码如下:

$('input').bind('keypress paste', function (event) {
var regex = /^[a-zA-Z0-9%()#@_& -]+$/;
var key = String.fromCharCode(event.charCode || event.which);
if (!regex.test(key)) {
   event.preventDefault();
   return false;
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="txt1"/>