html - 无需表单发布即可触发 html5 验证

Question

我想在没有表单发布的情况下实现这样的目标，因为它会重定向页面。

这是我的代码

<form>
  <input type="number" step="any" min="0" required oninvalid="this.setCustomValidity('Please enter price with decimal format, eg x.xx .')">
  <button type="submit">submit</button>
</form>

我做了一些研究，它似乎必须通过表单发布来触发。可以通过单击 jquery 函数按钮触发 html5 验证吗？

Answer 1

在输入更改时设置自定义验证消息并拦截表单提交事件:

var form = document.querySelector('form'),
    input = document.querySelector('#input-price');

input.addEventListener("change", function (event) {
  if (!input.checkValidity() || !/^\d+(\.\d+)?$/.test(input.value)) {
    input.setCustomValidity("Please enter price with decimal format, eg x.xx .");
  } else {
    input.setCustomValidity("");
  }
});

form.addEventListener("submit", function (event) {
  event.preventDefault();
});

<form>
  <input id="input-price" type="number" step="any" min="0" required>
  <input type="submit">
</form>

input.checkValidity() 当输入值为数字时返回 true，如 2、.1 和 1e10。然后正则表达式测试过滤掉最后两种情况(.1 和 1e10)。