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

Question

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

Answer 1

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

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

因为模式仅在表单提交期间验证，所以您必须添加一个小的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位数字。输入第二个数字等。