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

Question

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

Answer 1

您可以结合 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 位数字，然后再输入第二个数字，等等。