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;
    }
});

我面临的唯一问题是，如果您复制并粘贴任何不允许的字符，则无法防止其出现。我知道在某个地方看到过这样的功能，它可以禁止粘贴字符。有什么想法吗？

- Suzi Larsen

---

请添加您的代码。。。。。 - Pranav C Balan

在具有验证的输入字段的keydown或keyup上添加代码 - aelor

使用 $(element).on('paste',function(e) { // your validation code }) 拦截粘贴事件，参见 https://dev59.com/cG025IYBdhLWcg3wYFCH - Juned Lanja

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"/>

- Wiktor Stribiżew

---

太好了！谢谢你的解释，它确实非常有帮助。 - Suzi Larsen

我想知道为什么人们使用"!event.charCode ? event.which : event.charCode"而不是"event.charCode ? event.charCode : event.which"。或者只是"event.which || event.charCode"。 - gornvix

@gornvix 这是原始代码的复制粘贴，而且是在我完全不懂 JS 的 5 年前。event.charCode || event.which 的效果如预期。 - Wiktor Stribiżew

@WiktorStribiżew 我无法让它工作。添加“粘贴”似乎只是防止将所有内容粘贴到输入框中。在我看来，整个粘贴的字符串需要进行验证，而不仅仅是一个字符。 - gornvix

Answer 2

$("#textareaid").bind("paste", function(e){
    // access the clipboard using the api
    var pastedData = e.originalEvent.clipboardData.getData('text');
    alert(pastedData);
} );

或者您可以尝试这种方式 JQuery paste
还有一种方法，您可以在文本框上使用onChange或focusOut事件来完成。

- Sunil