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

作者站长头像
站长
· 阅读数 4

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

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

回复
1个回答
avatar
test
2024-06-24

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

当然有办法，在 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
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容