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

您可以结合使用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位数的数字，等等。

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

您可以在输入中使用html native pattern属性。

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

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

4 个答案: