Element Plus 表单验证详解

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

安装 Element Plus

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

npm install element-plus

或者：

yarn add 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。

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

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' }
  ]
}

表单验证方法

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

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

下面是这些方法的示例：

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      alert('提交成功!')
    } else {
      console.log('提交失败!')
      return false
    }
  })
}

const resetForm = () => {
  formRef.value.resetFields()
}

const validateUsername = () => {
  formRef.value.validateField('username', (valid) => {
    if (valid) {
      alert('用户名验证通过')
    } else {
      console.log('用户名验证失败')
    }
  })
}

const clearUsernameValidation = () => {
  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 的表单验证功能。