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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 16:33:42  来源:igfitidea点击:

Allowing only alphanumeric characters in a form textbox with Bootstrap?

jquerytwitter-bootstraptwitter-bootstrap-3

提问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:

演示:

http://jsfiddle.net/nqvsngd3/

http://jsfiddle.net/nqvsngd3/

回答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 patternis 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/