vue3 + element-plus 表单校验

**引言：**在之前写关于表单的验证的时候，我都是喜欢无脑直接手动判断，例如验证邮箱格式是否正确时，直接一个if语句加上正则表达式，虽然也能用，但书写代码总是显得不够优雅，特别的臃肿和混乱(这点在验证一个具有多字段的表单时尤为突出)。

这次在写这个vue3项目的时候学会了一个更为优雅的解决表单验证的方案------element-plus组件库里面的表单校验，下面我将详细介绍一下如何使用该组件库里面的表单组件和如何使用其表单校验(不同组件库或不同框架可能有不同的校验规则，这里主要讲述element-plus里面的)

el-form的使用：

element-plus的表单相关组件：

|---------------------|---------------------|-------------------|
| <el-form> | 表单容器，管理校验 / 提交 / 重置 | 所有表单场景的外层容器 |
| <el-form-item> | 表单项容器，关联标签 / 校验 | 单个输入项的包裹（含标签） |
| <el-input> | 单行文本输入 | 用户名、密码、手机号等 |
| <el-input-number> | 数字输入（带步进） | 数量、金额、年龄等 |
| <el-select> | 下拉选择 | 分类、状态、地区选择 |
| <el-checkbox> | 复选框（单 / 组） | 兴趣、权限、多选项选择 |
| <el-radio> | 单选框（单 / 组） | 性别、类型、唯一选项选择 |
| <el-switch> | 开关选择 | 启用 / 禁用、显示 / 隐藏切换 |
| <el-date-picker> | 日期 / 时间选择 | 生日、创建时间、有效期选择 |
| <el-time-picker> | 时间选择 | 上班时间、预约时段选择 |
| <el-rate> | 评分组件 | 满意度、星级评价 |
| <el-color-picker> | 颜色选择器 | 主题色、字体色选择 |
| <el-upload> | 文件上传 | 头像、附件、图片上传 |
| <el-cascader> | 级联选择器 | 省市区、分类层级选择 |
| <el-transfer> | 穿梭框 | 多选项批量转移（如权限分配） |

简单使用示例：

html 复制代码

<template>
  <!-- 表单容器：绑定模型、校验规则、提交事件 -->
  <el-form
    ref="formRef"
    :model="formData"            // 表单数据
    :rules="formRules"           // 校验规则
    label-width="100px"
    class="demo-form"
  >
    <!-- 输入框表单项 -->
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username" placeholder="请输入用户名" />
    </el-form-item>

    <!-- 密码框 -->
    <el-form-item label="密码" prop="password">
      <el-input
        v-model="formData.password"
        type="password"
        show-password
        placeholder="请输入密码"
      />
    </el-form-item>

    <!-- 单选框组 -->
    <el-form-item label="性别" prop="gender">
      <el-radio-group v-model="formData.gender">
        <el-radio label="male">男</el-radio>
        <el-radio label="female">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 下拉选择 -->
    <el-form-item label="城市" prop="city">
      <el-select v-model="formData.city" placeholder="请选择城市">
        <el-option label="北京" value="beijing" />
        <el-option label="上海" value="shanghai" />
        <el-option label="广州" value="guangzhou" />
      </el-select>
    </el-form-item>

    <!-- 提交/重置按钮 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 表单数据模型
const formData = ref({
  username: '',
  password: '',
  gender: '',
  city: ''
})

// 表单引用
const formRef = ref(null)

// 校验规则
const formRules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '用户名长度 3-10 位', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9]{6,16}$/, message: '密码为 6-16 位字母/数字', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  city: [
    { required: true, message: '请选择城市', trigger: 'change' }
  ]
})

// 提交表单
const submitForm = async () => {
  try {
    // 使用validate函数手动校验，返回promise对象
    await formRef.value.validate()
    ElMessage.success('表单提交成功！')
    console.log('表单数据：', formData.value)
  } catch (error) {
    ElMessage.error('表单校验失败，请检查！')
    console.error('校验失败：', error)
  }
}

// 重置表单
const resetForm = () => {
  formRef.value.resetFields()
  ElMessage.info('表单已重置')
}
</script>

el-form 是表单容器，用于存放各个表单项，它可以进行配置表单对象数据、表单的校验规则，即分别指 v-model="formData" 和 rules:"rules"，当在指定时机会根据rules里面的配置进行校验，错误会进行提示。

el-form-item 是一个表单项容器，它可以指定当前表单项的label，它里面存放的是一个表单项，如一个Input框、一个radio、一组checkbox等等。其还有一个重要的prop属性，用于将该表单项与校验规则配置对象建立关联，prop:'name'就表示当前表单项应使用name字段的校验规则。

具体表单项：如一个输入框：el-input，其使用v-model绑定数据，当指定时机如取消选中输入框时会触发表单校验(当设置trigger为blur时，后面会说)。

el-form表单校验规则的配置：

如上面我写的示例，需要给el-form组件的rules属性传一个校验对象，下面我将详细说一下校验对象的配置：

校验对象的格式：

javascript 复制代码

// 1.最简单示例

let rules = ref({
    username: [
       { min: 3, max: 10, message: '用户名长度需在 3-10 位之间', trigger: 'blur' }
    ]    
})

rules校验对象是一个对象，对象的每个属性的属性名对应一个需要校验字段的字段名，属性值是一个
数组，数组里面包含该字段的可能的校验规则(是一个对象)，如上面的username，其只有一种校验规则，
则数组里面就只有一个校验规则对象


// 2.一个表单字段对应两种或多种校验规则

let rules = ref({
    phone: [
      { len: 11, message: '手机号必须为 11 位', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'blur' }
    ] 
})

这里phone的值数组就有两个对象属性，表示其有两种校验要求

校验对象的可选属性：

|--------------|-------------------|------------------------------------------------|------------------|
| required | boolean | 是否必填 | 所有输入组件 |
| message | string | 校验失败时的提示文案 | 所有规则 |
| trigger | string/string[] | 触发校验的事件：blur（失焦）/ change（值变化）/ input（输入） | 所有规则 |
| min | number | 最小值（字符串 / 数组：长度；数字：数值） | 输入框、数字输入框、数组 |
| max | number | 最大值（同 min 逻辑） | 同 min |
| len | number | 精确长度（优先级高于 min/max） | 固定长度输入（如手机号） |
| pattern | RegExp | 正则表达式校验 | 格式校验（邮箱、手机号等） |
| validator | Function | 自定义同步 / 异步校验函数 | 复杂业务规则（如用户名查重） |
| whitespace | boolean | 是否允许仅空格（true：不允许；需配合 required） | 输入框防空白输入 |
| type | string | 内置类型校验（见下文） | 特定类型值校验（如邮箱、URL） |

对于账号、密码等自定义校验规则程度比较高的可以使用Pattern正则表达式校验，也可以使用validator 自定义校验函数(更灵活)，下面介绍一下validator的使用。

自定义校验函数validator的使用：

基本格式：

javascript 复制代码

validator: (rule, value, callback) => {
    // rule：是包含当前校验规则所有配置的对象
    // value：当前表单项的取值（formData[prop]）
    // callback：校验完成的回调（必须调用！）
    // - 成功：callback()
    // - 失败：callback(new Error('提示文案'))
  },

使用实例：

javascript 复制代码

const formRules = ref({
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  confirmPwd: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== formData.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback() 
        }
      },
      trigger: 'blur'
    }
  ]
})

手动校验表单：

可以使用el-form表单实例上的validate ()函数手动校验(校验所有带 prop 的表单项)，该函数返回一个promise对象，因此使用起来蛮方便的。

简单使用：

html 复制代码

<template>
  <el-form ref="formRef" :model="formData" :rules="formRules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username" />
    </el-form-item>
    <el-button @click="submitForm">提交（手动校验）</el-button>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref(null) // 绑定表单 ref
const formData = ref({ username: '' })
const formRules = ref({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
})

// 手动触发全表单校验
const submitForm = async () => {
  try {
    // 手动触发所有表单项校验
    await formRef.value.validate() 
    ElMessage.success('校验通过，提交成功！')
    console.log('表单数据：', formData.value)
  } catch (error) {
    ElMessage.error('表单校验失败，请检查！')
    console.error('校验失败的字段：', error)
  }
}
</script>

手动校验可以在提交时使用，手动校验一下提高安全性。

本周总结：

本周首先把社区部分交互了大半，差一点内容就写完了，然后就是把信息部分的静态补上了，优化了部分页面的静态，其次就是重构了一些路由组件，把该差分成普通组件的都拆分了一下。

学习的新内容方面：学习了一下表单如何合理使用(如上文的表单校验)、补充了一点tinyMCE的使用(如域名白名单)等等。

下周计划：先把项目该改的地方改一下，然后开始完善和交互后台部分吧。