允许用户在 Bootstrap 中的表单上的文本字段中仅输入 a-z、0-9 和空格的最简单方法是什么？例如，我不希望用户能够输入符号或代码或类似的东西。
【问题讨论】：
标签： jquery twitter-bootstrap twitter-bootstrap-3
我将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)
演示：
【讨论】：
$("#my_input_id_here").regexMask(mask)）来完成此操作，并且仅适用于该文本框。
您可以结合 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 sn-p 将自动验证页面上所有输入字段的输入模式。
注意：并非所有模式都可以在输入期间进行验证！
例如，pattern="^[0-9]{4}$"（一个 4 位数字）在输入过程中无法验证，因为您的第一次按键将输入一个 1 位数字，然后再输入第二个数字等。
【讨论】：
试试这个...
<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;
});
});
【讨论】：
您可以在输入中使用 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>
另外，一个有用的网站：http://html5pattern.com/
【讨论】：