Vue 表单验证课程指南 📚

一、表单验证基础概念 🔍

在Vue中，表单验证是确保用户输入数据合法性的关键步骤。通过v-model绑定表单字段，并结合rules对象定义校验规则，可以实现高效的数据校验。

1.1 必填字段验证 📝

使用required: true标记必填项，若未填写将触发提示：

rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ]
}

1.2 数据格式校验 📊

通过正则表达式限制输入格式，例如邮箱验证：

rules: {
  email: [
    { pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)+$/, message: '请输入有效邮箱', trigger: 'blur' }
  ]
}

二、常用验证规则 📋

三、自定义验证函数 ✏️

通过validator属性实现复杂校验逻辑：

rules: {
  password: [
    { validator: (rule, value, callback) => {
        if (value !== '123456') {
          callback(new Error('密码必须为123456'));
        } else {
          callback();
        }
      }, trigger: 'blur' }
  ]
}

四、表单提交与错误提示 🚀

1. 使用@submit.prevent阻止默认提交行为
2. 通过error对象获取校验错误信息
3. 动态显示错误提示：

   <span v-if="error.username">{{ error.username }}</span>
   

五、扩展学习 📚

• 深入理解Vue表单验证原理
• 探索Vue 3组合式API验证实现