Element Plus 表单验证详解

繁依Fanyi

发布于 2024-08-02 08:26:19

2980

发布于 2024-08-02 08:26:19

文章被收录于专栏：繁依Fanyi 的专栏

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>

代码解释

模板部分 (template)：
- <el-form>：整个表单的容器，绑定 model 属性到 form 对象，用于双向数据绑定。ref 用于在方法中引用表单，rules 用于设置验证规则，label-width 设置表单标签的宽度。
- <el-form-item>：表单项容器。label 属性用于设置表单项的标签，prop 属性用于绑定验证规则。
- <el-input>：输入框组件，使用 v-model 绑定数据。
- <el-button>：按钮组件，用于提交和重置表单。
脚本部分 (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>