vue3 中表单验证详解

在 Vue3 中，表单验证是关键部分，它确保用户输入的数据有效并且满足预设的要求。Vue 提供了一些内置的方式以及第三方库（如 Vuelidate 或是 Element UI 的 Form 插件）来进行表单验证。这里我们主要讨论 Vue 自带的响应式系统和自定义验证方法。

### 基于 `v-model` 的验证

Vue 的双绑定机制（`v-model`）使得数据驱动的表单验证变得简单。例如，我们可以直接在模板里设置必填字段规则：

<input v-model.trim="requiredField" :placeholder="requiredMessage" required>

其中 `required` 属性是 HTML5 的原生属性，如果字段为空则视为无效。Vue 会在数据变化时自动触发这种验证。

### 使用 `rules` 属性

如果你想要更复杂或自定义的验证，可以在 Vue 的实例上为 `$data` 添加一个 `rules` 对象，配合 `v-model` 和 `v-bind:class` 或者 `v-if` 来实现：

data() {
  return {
    form: {
      field: ''
    },
    validationRules: {
      field: [{ required: true, message: '请输入值' }]
    }
  }
},
watch: {
  form.field(newVal) {
    this.$refs.myForm.validateField('field', newVal);
  }
}

`$refs` 用于获取表单元素，`validateField` 方法用来验证指定字段。

### 自定义验证方法

创建一个自定义验证函数，接收验证规则和当前值作为参数：

methods: {
  customValidate(field, value) {
    if (!value || value.length < 3) {
      return false;
      // 返回 `false` 表示不符合规则，`true` 否则
    }
  }
}

然后在模板中使用这个方法：

<input v-model="form.field" :custom-validator="customValidate" />

### 第三方库辅助

使用 Element Plus 的 Form 组件或 Vuelidate 等库，可以提供更丰富的验证功能，如动态验证、异步校验等。

**相关问题：**
1. 如何在 Vue 中阻止表单默认提交行为并自定义验证？
2. Vue 的 `v-model.lazy` 与表单验证有何关联？
3. 在 Vue 中如何实现动态加载验证规则？