jQuery 使用 Bootstrap 在表单文本框中只允许字母数字字符?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/29112009/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Allowing only alphanumeric characters in a form textbox with Bootstrap?
提问by connor martin
What is the easiest way to allow the user to only input a-z, 0-9 and spaces in a text field on a form within Bootstrap? I don't want the user for example to be able to type in symbols or code or anything like that.
允许用户仅在 Bootstrap 表单上的文本字段中输入 az、0-9 和空格的最简单方法是什么?例如,我不希望用户能够输入符号或代码或类似的东西。
回答by sifriday
I use https://github.com/ruoso/jquery-regex-mask-pluginwith my Bootstrap-styled forms. It works well!
我将https://github.com/ruoso/jquery-regex-mask-plugin与 Bootstrap 样式的表单一起使用。它运作良好!
I cannot remember exactly why, but I have cut it down to just this:
我不记得确切原因,但我已将其缩减为:
$.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;
});
};
You could then apply it to your inputs using:
然后,您可以使用以下方法将其应用于您的输入:
var mask = new RegExp('^[A-Za-z0-9 ]*$')
$("input").regexMask(mask)
Demo:
演示:
回答by Tanmay Patel
Try this...
尝试这个...
<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;
});
});
回答by Philipp
You can combine HTML5 pattern validation to prevent users from submitting invalid data:
您可以结合 HTML5 模式验证来防止用户提交无效数据:
<input type="text" pattern="^[a-zA-Z0-9 ]+$" />
Because the pattern
is only validated during form submit, you have to add a small JS function to validate the pattern already during text input:
因为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;
}
} );
This jQuery snippet will automatically validate the input pattern of all input fields on your page.
此 jQuery 代码段将自动验证页面上所有输入字段的输入模式。
Note: Not all patterns can be validated during input!
For example pattern="^[0-9]{4}$"
(a 4-digit number) cannot be validated during input, because your first keypress will enter a 1-digit number, before you enter the second digit, etc.
注意:并非所有模式都可以在输入期间验证!
例如pattern="^[0-9]{4}$"
(一个 4 位数字)在输入过程中无法验证,因为您的第一次按键将输入一个 1 位数字,然后再输入第二个数字等。
回答by Darshan Joshi
You can use html native pattern attribute on input.
您可以在输入上使用 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>
check at w3schools
在w3schools查看
also, a useful site: http://html5pattern.com/
还有一个有用的网站:http: //html5pattern.com/