请问如何调用 form input 的检查机制，而不要 submit 跳转页面?

Question

请问如何调用 form input 的检查机制，而不要 submit 跳转页面?

目前调用 js 的 submit 方法，浏览器会检查 input 的条件像是 require, min, max 等
但是假如检查都通过会 submit 跳转页面
想要不跳转 URL 页面，也能检查，自动会 scroll 到有问题 input，并跳出浏览器自带的提示词

Answer 1

满足验证后自动跳转页面（提交表单）这本来就是符合预期的行为呀，按你的需求，表单就提交不出去了。

当然有办法，在 form 的 submit 事件里面阻止默认行为（成功时提交表单）就好了，未通过验证的是不会进入到 submit 事件的。

<form action="" id="form1">
    <input type="text" required>
    <input type="submit">
</form>
<script>
    const form1 = document.querySelector('#form1');

    form1.addEventListener('submit', function (ev) {
        ev.preventDefault();
        console.log('通过验证');
    });
</script>

如果你想要手动验证表单/输入框（任何时候），可以使用表单/输入框的方法(checkValidity/reportValidity)

console.log(myform.checkValidity()); // return boolean , true if form is valid, false if anything is invalid in the form

console.log(myform.reportValidity()); // will throw error explaining why  `form.checkValidity()` returning false

• javascript - How to use HTML form.checkValidity()? - Stack Overflow
• HTMLFormElement: reportValidity() method - Web APIs | MDN
• HTMLInputElement: checkValidity() method - Web APIs | MDN

Answer 2

那你直接用表单验证组件吧 https://element.eleme.cn/#/zh-CN/component/form

Answer 3

如果你只想要表单启动校验机制，但不希望提交表单，可以侦听表单的 submit 事件，然后 event.preventDefault()。这样浏览器会检查表单元素，并给出对应的提示。

如下：

form.addEventListener('submit', event => {
  event.preventDefault();
  // 做你其它想做的事情
});