javascript - 文本字段中仅允许使用罗马字符

Question

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

提前致谢。

Answer 1

在现代浏览器中<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 内容都不会阻止您网站的所有访问者提交损坏的内容。