van-field自定义校验 onsubmit

van-field是Vant UI库中的一个轻量级表单验证组件，它允许你在HTML表单中添加自定义校验规则。`onsubmit`事件通常用于阻止表单的默认提交行为，当你要在用户提交表单之前检查字段是否满足某些条件时非常有用。

当你在使用van-field时，可以结合`v-model`属性和`validate`方法进行自定义校验。例如：

<form @submit.prevent="submitForm">
  <van-field v-model="username" name="username" :rules="{ required: true, min: 5 }"></van-field>
  
  <!-- 其他输入字段... -->

  <button type="submit">提交</button>
</form>

<script>
export default {
  data() {
    return {
      username: '',
    };
  },
  methods: {
    submitForm() {
      this.$refs.username.validate((valid) => {
        if (valid) {
          // 如果校验通过，执行实际提交操作
          // 提交数据...
        } else {
          // 如果校验未通过，显示错误信息或阻止提交
          console.log('用户名不符合要求');
        }
      });
    },
  },
};
</script>

在这个例子中，`:rules="{ required: true, min: 5 }"`表示用户名字段需要必填且长度不得少于5字符。当用户点击提交按钮时，`validate`方法会被触发，如果所有校验都通过，表单会正常提交；反之，则不会提交，并可能弹出错误提示。