文本字段中只允许使用罗马字符

Allow only roman characters in text fields

本文关键字：许使用 罗马 字符 字段 文本      更新时间：2024-02-18

我正在寻找一种方法，使网站中的所有文本框都只接受罗马字符。有什么简单的方法可以在全球范围内做到这一点吗。

提前谢谢。

在现代浏览器中，<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的东西并不能阻止你网站的所有访问者提交损坏的东西。

对于过滤掉非罗马字符的正则表达式，我将参考以下问题的标记答案：

如何检测JS中的非罗马字符？

剧透：正则表达式是/[^'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));
    }
});
相关文章：