Question

这是我的代码：Codepen

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

<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>

SCRIPT

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

提前致谢

Answer 1

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

或者正如评论中指出的那样，当输入的值发生变化时，您可以使用更适合的input事件。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: