只允许数字和字母输入字符串

Question

我试图避免在我的页面上使用输入字符串输入除数字和字母以外的任何标记page.php ：

<input type="text" id="input"> 

从这个答案只允许英文字符和数字文本输入<input type="text" id="input" class="clsAlphaNoOnly"> ：

$(document).ready(function () {
  $('.clsAlphaNoOnly').keypress(function (e) {  // Accept only alpha numerics, no special characters 
        var regex = new RegExp("^[a-zA-Z0-9 ]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        }

        e.preventDefault();
        return false;
    }); 
})

或这个：

$(function(){
    $("#input").keypress(function(event){
        var ew = event.which;
        if(ew == 32)
            return true;
        if(48 <= ew && ew <= 57)
            return true;
        if(65 <= ew && ew <= 90)
            return true;
        if(97 <= ew && ew <= 122)
            return true;
        return false;
    });
});

在这两种情况下，字符串都是清晰的，但我使用两种类型的输入，按钮单击$("#btn").click(function()来处理输入和$(document).keypress(function(e)并点击在键盘上输入键以进行相同的输入。由于某种原因，如果我包含此方法以避免字符串中的额外标记，则按 Enter 键不允许输入插入的值。

这种方式工作正常：

<input type="text" id="input"  onkeypress="return (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode >= 48 && event.charCode <= 57)" />

但我想避免在page.php中使用html的额外代码。 我试图弄清楚，是什么导致使用给定方法阻止输入插入值

Answer 1

会告诉你可能会错过事件参数吗？

在 3 个浏览器中，没有 jQuery 对我来说是这样的：

 function clsAlphaNoOnly (e) { // Accept only alpha numerics, no special characters var regex = new RegExp("^[a-zA-Z0-9 ]+$"); var str = String.fromCharCode(!e.charCode ? e.which : e.charCode); if (regex.test(str)) { return true; } e.preventDefault(); return false; } function clsAlphaNoOnly2 () { // Accept only alpha numerics, no special characters return clsAlphaNoOnly (this.event); // window.event }

 <input type="text" id="input" onkeypress="clsAlphaNoOnly(event)" onpaste="return false;"> <input type="text" id="input" onkeypress="clsAlphaNoOnly2()" onpaste="return false;">

Answer 2

一种验证方式是在input元素上使用pattern属性

MDN： https : //developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression

在你的情况下：

<input type="text" pattern="[a-zA-Z0-9]*">

Answer 3

您可以将pattern与required一起使用，而不是 javascript。 pattern将允许您为输入指定所需的模式，而required将使输入成为必需的。 两者都必须evaluate为true才能提交表单。

 <form> <input type="text" id="input" pattern="[a-zA-Z0-9]+" required> <input type="submit"> </form>

Answer 4

如果您真的不想使用 Regex 方法作为下面的注释建议您，那么您可以使用以下简单代码：

 document.querySelector("input#testInput").addEventListener("input", function(){ const allowedCharacters="0123456789azertyuiopqsdfghjklmwxcvbnAZERTYUIOPQSDFGHJKLMWXCVBN"; // You can add any other character in the same way let newValue=""; this.value.split("").forEach(function(char){ if(in_array(char, allowedCharacters.split(""))) newValue+=char; }); this.value=newValue; }); function in_array(elem, array){ let isIn=false; for(var i=0;i<array.length;i++){ if(elem==array[i]) isIn=true; } return isIn; }

 <input type="text" id="testInput">

Answer 5

HTML 输入方式：

1- 简单 HTML5 输入

<input type="text" pattern="[a-zA-Z0-9]*">

2- 内联 Function

<input type="text" id="input"  onkeypress="return (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode >= 48 && event.charCode <= 57)" />

---

---

Jquery 方式：

$('#ID').on('keypress', function (e) { var code = ('charCode' in e) ? e.charCode : e.keyCode; if (!(code > 47 && code < 58) && !(code > 64 && code < 91) && !(code > 96 && code < 123)) {e.preventDefault();}});

---

---

Javascript Function：

function allowAlphaNumericSpace(e) {
  var code = ('charCode' in e) ? e.charCode : e.keyCode;
  if ( !(code > 47 && code < 58) && !(code > 64 && code < 91) && !(code > 96 && code < 123)) { e.preventDefault();}};

<input type="text" onkeypress="allowAlphaNumeric(event)" />