使用粘贴时有效的 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. 绑定paste事件（正如上面已经提到的）
2. 修复您的正则表达式@，允许和之间的范围内的字符_（所有字母和一些字符，如^, [... 因为您没有转义连字符，并且它创建了一个[@-_]有效的范围（这就是为什么您没有收到任何错误） ，但这不是您所期望的。

这是固定代码：

$('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"/>