为什么正则表达式不允许使用字母？

Question

我用这个来限制用户输入数字。我希望他只输入像a，b，c，d，e等字母

但它的工作原理相反。

  <input type="text" id="name" name="name" oninput="this.value = this.value.replace(/[A-Za-z]*/, '');" class="form-control" placeholder="Your name" required>

Answer 1

使用/[0-9]/, ''

 <input type="text" id="name" name="name" oninput="this.value = this.value.replace(/[0-9]/, '');" class="form-control" placeholder="Your name" required>

Answer 2

你尝试过类似的东西吗？

this.value.replace(/[^A-Za-z]*/, '')

?

Answer 3

我建议使用HTML5的pattern属性，并使用相应的:invalid CSS修饰符标记无效字段。

不同之处在于用户可能输入数字但无法提交表格。这样他/她知道什么是错的，可以解决他/她的错误。

演示：

input:invalid {border: 2px solid red;}

<form>
  <input type="text" id="name" name="name" placeholder="Your name" pattern="[^\d]+" required>
  <input type="submit" />
</form>

您还可以添加自定义验证消息：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('[data-invalid]').forEach(function (input) {
    input.addEventListener('invalid', function () { 
      input.setCustomValidity(input.dataset.invalid); 
    });
    input.addEventListener('input', function () {
      input.setCustomValidity(''); 
    })
  });
});

input:invalid {border: 2px solid red;}

<form>
  <input type="text" id="name" name="name" placeholder="Your name" pattern="[^\d]+" data-invalid="Your name cannot contain numbers!" required>
  <input type="submit" />
</form>