jquery / JS 只允许文本字段中的数字和字母答案

【问题标题】：jquery / JS allow only numbers & letters in a textfieldjquery / JS 只允许文本字段中的数字和字母
【发布时间】：2025-12-14 19:25:08
【问题描述】：

在文本框中只允许字母/数字的最简单方法是什么。我们正在使用 JS/jQuery，但不想使用验证插件？

【问题讨论】：

标签： javascript jquery validation forms

【解决方案1】：

我的解决方案是这样的：

jQuery('input[type="text"]').keyup(function() {
    var raw_text =  jQuery(this).val();
    var return_text = raw_text.replace(/[^a-zA-Z0-9 _]/g,'');
    jQuery(this).val(return_text);
});

每当用户尝试输入除数字、字母、空格或下划线以外的任何内容时，该函数都会返回一个带有已删除带状字符的字符串。

【讨论】：

完美运行 :) 我认为这是一种更好的方法，因为它已经防止用户输入无效字符。 :) 如果文本框中没有条目，当用户按下提交按钮以防止任何提交时，我该如何做同样的事情？
我的方法不是最安全的方法，而是使用 jQuery 隐藏提交按钮，直到数据正确为止。缺点是用户可以使用调试器显示按钮。因此，故障保险是在提交后添加检查以确保数据正确。然后通知用户他们的错误。

【解决方案2】：

您可以在表单提交上使用简单的正则表达式来评估文本框的内容、显示错误并停止表单提交。制作一个功能，当文本框失去焦点时，您也可以应用它。经常这样做，你会发现你已经重新实现了验证插件。

$(function() {
    $('form').submit( function() {
        return validateTB( $('#textbox'), true, $('#textboxError') );
    });

    $('#textbox').blur( function() {
        validateTB( $(this), true, $('#textboxError') );
    });

    function validateTB(tb,required,msg) {
        var $tb = $(tb);
        var re = '/^[a-z0-9]';
        if (required) {
           re += '+';
        }
        else {
           re += '*';
        }
        re += '$/';

        if ($tb.val().match(re) == null) {
           $(msg).show();
           return false;
        }
        $(msg).hide();
        return true;
    }
});

【讨论】：

【解决方案3】：

如果你不想使用插件 - 一些普通的旧 JS 验证呢？

我不久前在我的博客上发布过这个 --> http://dotnetbutchering.blogspot.com/2009/04/definitive-javascript-validation-with.html

您会看到我提出的解决方案中的函数需要一个输入字段 ID 和一个正则表达式（并且您必须想出一个正则表达式来满足您的验证需求，如果您只想要 aplhanumeric 应该很简单）和根据验证的结果将控件的背景设置为绿色或红色。我知道它并不完美，但我认为它足以让您继续前进，您可以以此为起点来打造自己的产品。

我确信有一些使用 jQuery 或纯 JS 的优雅解决方案，但到目前为止，这些方面的一些东西对我来说效果很好。

希望对你有帮助。

【讨论】：

【解决方案4】：

由于 tvanfossen 的 sn-p 仅在提交时触发，而 Ian 的效果不如预期，我只想添加一个更简洁的方法：

HTML：

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

JS（jQuery）：

$('#myinput').keypress(function (e) {
    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;
});

【讨论】：

当我将这些章程复制并粘贴到输入字段#$%^&*() 时，我发现此方法存在问题，它不会阻止这些章程

【解决方案5】：

Ian 答案的一个变体更轻量级和更短：

function onlyAllowAlphanumeric() {
    this.value = this.value.replace(/[^a-zA-Z0-9 _]/g, '');
});

$('input[type="text"]').keyup(onlyAllowAlphanumeric);

【讨论】：

【解决方案6】：

这是一个简单的解决方案，它将检查 keyup 上的输入并在用户键入时删除不需要的字符：

<input class="usr" type="text id="whatever" name="whatever" />

        $(".usr").keyup(function() {
            var n = $(this).val();
            if ( n.match("^[a-zA-Z0-9 ]*$") == null ) {
                $(this).val(n.slice(0,-1));
            }
        });

可以更改正则表达式以适应规范。

【讨论】：