Element Plus 表单验证详解

Element Plus 是基于 Vue 3 的一套组件库，它提供了许多组件帮助开发者快速构建现代 Web 应用。本文将详细介绍如何在 Element Plus 中进行表单验证，并通过具体示例解释每个部分的用法。

安装 Element Plus

在使用 Element Plus 之前，需要先安装它。假设你已经有一个 Vue 3 项目，可以通过 npm 或 yarn 安装 Element Plus：

npminstall element-plus

或者：

yarnadd element-plus

安装完成后，在项目入口文件中引入 Element Plus：

import{ createApp }from'vue'import ElementPlus from'element-plus'import'element-plus/dist/index.css'import App from'./App.vue'const app =createApp(App)
app.use(ElementPlus)
app.mount('#app')

创建表单

首先，使用 Element Plus 提供的组件创建一个基本的表单结构：

<template>
  <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </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>
import { reactive, ref } from 'vue'
export default {
  setup() {
    const form = reactive({
      username: '',
      email: '',
      password: ''
    })
    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
      ]
    }
    const formRef = ref(null)
    const submitForm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          alert('提交成功!')
        } else {
          console.log('提交失败!')
          return false
        }
      })
    }
    const resetForm = () => {
      formRef.value.resetFields()
    }
    return {
      form,
      rules,
      formRef,
      submitForm,
      resetForm
    }
  }
}
</script>

代码解释

1. **模板部分 (template)**：- <el-form>：整个表单的容器，绑定 model 属性到 form 对象，用于双向数据绑定。ref 用于在方法中引用表单，rules 用于设置验证规则，label-width 设置表单标签的宽度。- <el-form-item>：表单项容器。label 属性用于设置表单项的标签，prop 属性用于绑定验证规则。- <el-input>：输入框组件，使用 v-model 绑定数据。- <el-button>：按钮组件，用于提交和重置表单。
2. **脚本部分 (script)**：- reactive：创建响应式对象 form，用于存储表单数据。- ref：用于创建对表单实例的引用 formRef。- rules：存储表单验证规则。- submitForm：提交表单时触发，调用 validate 方法验证整个表单。- resetForm：重置表单，将所有字段值重置为初始值，并移除校验结果。

表单验证详解

验证规则

在

rules

对象中，每个字段对应一个数组，数组中包含一个或多个验证规则对象。每个验证规则对象可以包含以下属性：

• required: 是否必填。
• message: 验证失败时的提示信息。
• trigger: 触发验证的事件类型，可以是 blur 或 change。
• type: 验证的数据类型，可以是 string、number、boolean、method、regexp、integer、float、array、object、enum、date、url、hex、email。
• min 和 max: 限制输入的最小和最大长度（仅适用于 string 和 array 类型）。
• validator: 自定义验证函数。

自定义验证器

有时内置的验证规则可能无法满足需求，这时可以使用自定义验证器。自定义验证器是一个函数，接受三个参数：

rule

，

value

，和

callback

。

下面是一个示例，演示如何添加一个自定义验证器来验证用户名是否已被占用：

constcheckUsername=(rule, value, callback)=>{if(!value){returncallback(newError('请输入用户名'))}// 模拟异步验证setTimeout(()=>{if(value ==='admin'){callback(newError('用户名已被占用'))}else{callback()}},1000)}const rules ={username:[{validator: checkUsername,trigger:'blur'}]}

表单验证方法

Element Plus 提供了多个方法来控制表单验证：

• validate(callback): 对整个表单进行验证。callback 会在验证完成后被调用，并接收一个布尔参数，表示验证是否通过。
• validateField(prop, callback): 对某个字段进行验证。prop 是字段的属性名称，callback 是验证完成后的回调函数。
• resetFields(): 重置表单，将所有字段值重置为初始值，并移除校验结果。
• clearValidate(props): 移除表单项的校验结果。props 是需要移除校验的字段属性组成的数组，如果不传则移除所有字段的校验结果。

下面是这些方法的示例：

constsubmitForm=()=>{
  formRef.value.validate((valid)=>{if(valid){alert('提交成功!')}else{
      console.log('提交失败!')returnfalse}})}constresetForm=()=>{
  formRef.value.resetFields()}constvalidateUsername=()=>{
  formRef.value.validateField('username',(valid)=>{if(valid){alert('用户名验证通过')}else{
      console.log('用户名验证失败')}})}constclearUsernameValidation=()=>{
  formRef.value.clearValidate(['username'])}

完整示例

下面是一个完整的示例，展示了如何使用 Element Plus 实现一个带有表单验证的表单：

<template>
  <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </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>
import { reactive, ref } from 'vue'
export default {
  setup() {
    const form = reactive({
      username: '',
      email: '',
      password: ''
    })
    const checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入用户名'))
      }
      // 模拟异步验证
      setTimeout(() => {
        if (value === 'admin') {
          callback(new Error('用户名已被占用'))
        } else {
          callback()
        }
      }, 1000)
    }
    const rules = {
      username: [
        { validator: checkUsername, trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
      ]
    }
    const formRef = ref(null)
    const submitForm = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          alert('提交成功!')
        } else {
          console.log('提交失败!')
          return false
        }
      })
    }
    const resetForm = () => {
      formRef.value.resetFields()
    }
    return {
      form,
      rules,
      formRef,
      submitForm,
      resetForm
    }
  }
}
</script>

总结

Element Plus 提供了强大且灵活的表单验证功能，能够满足各种复杂的表单验证需求。通过使用内置的验证规则和自定义验证器，可以实现对表单项的精确控制。希望本文能够帮助你更好地理解和使用 Element Plus 的表单验证功能。