使用粘贴时有效的html输入验证答案

【问题标题】：html input validation that works when using paste使用粘贴时有效的html输入验证
【发布时间】：2015-09-14 08:51:16
【问题描述】：

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

$('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;
    }
});

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

【问题讨论】：

添加你的代码............
在具有验证的输入字段的 keydown 或 keyup 上添加代码
使用 $(element).on('paste',function(e) { // 你的验证码 }) 见stackoverflow.com/questions/6035071/…

标签： javascript jquery html regex input

【解决方案1】：

你必须做两件事：

绑定paste事件（上面已经提到过）
修复您的正则表达式，它允许@ 和_ 之间的字符（所有字母和一些字符，如^、[...因为你做到了不要转义连字符，它会创建一个有效范围[@-_]（这就是您没有收到任何错误的原因），但这不是您所期望的。

这里是固定代码：

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

【讨论】：

太好了！谢谢你的解释也很有帮助
我想知道为什么人们使用 "!event.charCode ? event.which : event.charCode" 而不是 "event.charCode ? event.charCode : event.which"。或者只是“event.which || event.charCode”。
@gornvix 那是 OP 代码的复制/粘贴，而 5 年前，当我完全不懂 JS 时。 event.charCode || event.which 按预期工作。
@WiktorStribiżew 我无法让它工作。添加“粘贴”似乎只是阻止所有粘贴到输入框中。在我看来，整个粘贴的字符串都需要验证，而不仅仅是一个字符。

【解决方案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 事件来实现

【讨论】：