对于验证，可以在键按事件上使用模式属性吗？

Question

这是我的代码：科德芬

如果没有任何脚本，验证错误消息将显示在表单提交上。

<form>
  <input type="text" name="text1" placeholder="min-8, max-16, a-z, A-Z" pattern="^[a-zA-Z]{8,16}$" required>
  <input type="submit">
</form>

我们能在提交表单前用小脚本在键上显示验证错误消息.

所以我试过了，但没有用

HTML

<form> 
  <input type="text" name="text2" class="numberValid" placeholder="min-4, max-4, 0-9" pattern="^[0-9]{4}$" required>
  <input type="submit">
</form>

剧本

$('.numberValid').on('keypress', function () {
    this.setCustomValidity('');
 });

提前感谢

Answer 1

您可以测试每个keyup事件的输入值(在字符被添加到输入之后触发，keypress在.之前触发)。

或者，正如注释中指出的那样，您可以使用在更改输入值时触发的更合适的input事件。

​

$('document').ready(function() {
    $('.numberValid').on('input', function() {
      re = new RegExp(this.pattern);
      str = $(this).val();
      $('label').toggle(!re.test(str));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input type="text" name="text2" class="numberValid" placeholder="min-4, max-4, 0-9" pattern="^[0-9]{4}$" required>
  <label for="text2">Please enter 4 digits</label>
  <br/>
  <input type="submit">
</form>

​

要仅在第一个按键上显示错误，只需在加载DOM时隐藏标签：

​

$('document').ready(function() {
  $('label').hide();
  $('.numberValid').on('input', function() {
    re = new RegExp(this.pattern);
    str = $(this).val();
    $('label').toggle(!re.test(str));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input type="text" name="text2" class="numberValid" placeholder="min-4, max-4, 0-9" pattern="^[0-9]{4}$" required>
  <label for="text2">Please enter 4 digits</label>
  <br/>
  <input type="submit">
</form>

​