模板部分 (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">code>

<el-form-item label="用户名" prop="username">code>

<el-input v-model="form.username"></el-input>code>

</el-form-item>

<el-form-item label="邮箱" prop="email">code>

<el-input v-model="form.email"></el-input>code>

</el-form-item>

<el-form-item label="密码" prop="password">code>

<el-input type="password" v-model="form.password"></el-input>code>

</el-form-item>

<el-form-item>

<el-button type="primary" @click="submitForm">提交</el-button>code>

<el-button @click="resetForm">重置</el-button>code>

</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>

总结