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

Question

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

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

Answer 1

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

如下：

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

Answer 2

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

Answer 3

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

当然有办法，在 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 formconsole.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