我正在寻找一种方法,使网站中的所有文本框只接受罗马字符。有没有什么简单的方法可以在全球范围内做到这一点?
提前致谢。
在现代浏览器中
<input>
接受名为 pattern
的属性。这允许限制给定字段中的有效字符。
input:invalid {
background-color:red;
}
<form>
<input type="text" pattern="[a-zA-Z\s\.\-_]+" />
<button type="submit">Submit</button>
</form>
对于所有其他浏览器,您可以通过 jQuery 查找所有表单字段,检查
pattern
属性是否存在,并根据给定字段的值检查它。您还可以替换不允许的字符:
$('form').on('keyup blur','input',function() {
if ($(this).val() && $(this).attr('pattern')) {
//var pattern = new RegExp('^'+$(this).attr('pattern')+'$', 'g');
//$(this).toggleClass('invalid', pattern.match(!$(this).val()));
var pattern = new RegExp($(this).attr('pattern').replace(/\[/,'[^'), 'g');
$(this).val($(this).val().replace(pattern,''));
}
});
input:invalid {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form>
<input type="text" pattern="[a-zA-Z\s\.\-_]+" />
<button type="submit">Submit</button>
</form>
哦,您仍然想在服务器端验证表单输入。所有 HTML 或 Javascript 内容都不会阻止您网站的所有访问者提交损坏的内容。
我将参考以下问题的标记答案来过滤掉非罗马字符的正则表达式:
剧透:正则表达式是
/[^\u0000-\u024F\u1E00-\u1EFF\u2C60-\u2C7F\uA720-\uA7FF]/g
现在您所需要的只是对 jQuery 进行一些修改:
var myInputId = "#foo"; // Or whatever you wish to use.
var input = $(myInputId);
var exp = /[^\u0000-\u024F\u1E00-\u1EFF\u2C60-\u2C7F\uA720-\uA7FF]/g;
input.blur(function() {
input.value = input.value.replace(exp, "");
});
将此代码段包含到您的母版页中,例如:
<script>
$(function(){
$('input[type=text],textarea').keypress(function(e){
var char = String.fromCharCode(e.which || e.charCode);
var rgx = /[\u0000-\u007F]/;
if (rgx.test(char) == false)
return false;
})
})
</script>
这是我基于@fboes 答案的想法。 我还需要向用户显示出了什么问题,因此在连续输入几个禁用字符时会显示错误消息,但没有冗余。
//I wanted first to assign pattern attr to every input in form but when it's happening, all "\" chars are removed from regex therefore - it doesn't work, so I had to add it in templates for every input.
let isIncorrect = false;
scope.checkPattern = function(e) {
// I don't want to allow Chineese, cyrylic chars but some other special - yes
var pattern = new RegExp('[a-zA-Z\s\.\-_äÄöÖüÜßąćęłńóśźżĄĆĘŁŃÓŚŹŻ]+', "g");
if ($(e).is(':valid')){
return true
} else {
$(e).val($(e).val().replace(pattern,''));
return false
}
};
scope.removeAlert = function (e){
$(e).parent().find('.text-danger').remove();
isIncorrect = false;
}
// unallowed characters in order inputs
$('.my-form').on('keyup blur','input',function(e) {
if (!scope.checkPattern($(this))) {
if (!isIncorrect){
// show this error message but only once (!) and for specified period of time
$(this).parent().append('<p class="text-danger">Only latin characters allowed</p>');
isIncorrect = true;
}
setTimeout(scope.removeAlert, 3000, $(this));
}
});
最好使用
input
事件,因为 keypress
事件在某些情况下会被超越,例如使用某些输入法(例如中文拼音)时。
document.addEventListener("DOMContentLoaded", function() {
var textarea = document.querySelector('textarea');
textarea.addEventListener('input', function(event) {
var currentValue = event.target.value;
var validValue = currentValue.replace(/[^a-zA-Z0-9]/g, ''); // Replace characters that are not alphanumeric, #$, /, newline or carriage return with an empty string
if (currentValue !== validValue) {
event.target.value = validValue; // Set the textarea value to the valid value
event.preventDefault(); // Prevent default behavior to deny the change
}
});
});