在带有 Bootstrap 的表单文本框中只允许字母数字字符？

Question

允许用户在 Bootstrap 的表单的文本字段中仅输入 a-z、0-9 和空格的最简单方法是什么？例如，我不希望用户能够输入符号或代码或类似的东西。

Answer 1

我将 https://github.com/ruoso/jquery-regex-mask-plugin 与 Bootstrap 样式的表单一起使用。效果不错！

我不记得具体原因了，但我把它缩减为：

$.fn.regexMask = function(mask) {
    $(this).keypress(function (event) {
        if (!event.charCode) return true;
        var part1 = this.value.substring(0, this.selectionStart);
        var part2 = this.value.substring(this.selectionEnd, this.value.length);
        if (!mask.test(part1 + String.fromCharCode(event.charCode) + part2))
            return false;
    });
};

然后您可以使用以下方法将其应用于您的输入：

var mask = new RegExp('^[A-Za-z0-9 ]*$')
$("input").regexMask(mask)

演示：

http://jsfiddle.net/nqvsngd3/

Answer 2

您可以在输入中使用 html 本机模式属性。

<form action="demo_form.asp">
Country code: <input type="text" name="country_code" 
pattern="^[a-zA-Z0-9 ]+$" title="A-Z a-z 0-9 ' '">
<input type="submit">
</form>

查看 w3schools

还有一个有用的网站：http://html5pattern.com/

Answer 3

试试这个...

<form method="post" action="">
    <input type="text" name="name" id="name" class="form-control" value="">
    <input type="submit" name="submit" class="btn btn-default" value="Submit">
</form>

jQuery(document).ready(function($){
    $('#name').keypress(function (e) {
        var regex = new RegExp("^[0-9a-zA-Z_\. ]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        }
        e.preventDefault();
        return false;
    });
});

Answer 4

您可以结合 HTML5 模式验证来防止用户提交无效数据：

<input type="text" pattern="^[a-zA-Z0-9 ]+$" />

因为 pattern 仅在表单提交期间验证，您必须添加一个小的 JS 函数来在文本输入期间验证模式：

$( 'body' ).on( 'keypress', ':input[pattern]', function( ev ) {
    var regex  = new RegExp( $(this).attr( 'pattern' ) );
    var newVal = $(this).val() + String.fromCharCode(!ev.charCode ? ev.which : ev.charCode);

    if ( regex.test( newVal ) ) {
        return true;
    } else {
        ev.preventDefault();
        return false;
    }
} );

此 jQuery 代码段将自动验证您页面上所有输入字段的输入模式。

注意：并非所有模式都可以在输入时验证！
例如 pattern="^[0-9]{4}$"（一个 4 位数字）在输入过程中无法验证，因为您的第一次按键将输入一个 1 位数字，然后再输入第二个数字，等等。

在带有 Bootstrap 的表单文本框中只允许字母数字字符？

Allowing only alphanumeric characters in a form textbox with Bootstrap?

jquery

twitter-bootstrap

twitter-bootstrap-3