Vuetify 3无表单场景下的输入验证及表单使用疑问

完全可以用form标签，同时避免页面刷新，还能轻松实现全字段有效性检查，具体做法如下：

• 把所有需要验证的输入字段都包裹进<form>标签里，不需要设置action和method属性（或者留空就行）。
• 监听form的submit事件，在事件处理函数里用event.preventDefault()彻底阻止浏览器默认的页面刷新提交行为。
• 借助HTML5原生的表单验证API，调用form.checkValidity()就能一键检查所有字段是否符合预设的验证规则（比如required、minlength、pattern这些），返回true就说明所有字段都有效，false则存在无效字段。
• 验证通过后，自己编写代码收集表单数据，用fetch或者axios提交到目标API即可。

给你个简单的示例代码：

<form id="apiSubmitForm">
  <input type="email" required placeholder="请输入邮箱">
  <input type="password" minlength="6" required placeholder="请输入至少6位密码">
  <button type="submit">提交到API</button>
</form>

<script>
const form = document.getElementById('apiSubmitForm');
form.addEventListener('submit', (e) => {
  // 阻止默认提交刷新
  e.preventDefault();
  
  // 检查所有字段是否有效
  if (form.checkValidity()) {
    // 收集表单数据
    const formData = new FormData(form);
    const submitData = Object.fromEntries(formData);
    
    // 提交到API
    fetch('你的API接口地址', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(submitData)
    })
    .then(response => response.json())
    .then(result => {
      console.log('提交成功', result);
      // 这里可以加提交成功后的处理，比如提示用户、清空表单
    })
    .catch(error => {
      console.error('提交失败', error);
      // 处理提交错误
    });
  } else {
    // 触发浏览器自带的错误提示（也可以换成你自己的自定义提示逻辑）
    form.reportValidity();
  }
});
</script>

额外补充：

• 如果你已经有自己的自定义验证逻辑，也可以在调用checkValidity()之后，或者直接替换它，遍历form内的字段逐个校验，但原生API能帮你省不少重复代码。
• 就算不用submit类型的按钮，也可以在普通按钮的点击事件里手动调用form.checkValidity()，实现全字段验证。

内容的提问来源于stack exchange，提问作者user3953989