Vue3 Element Plus表单自定义校验的实现全过程
作者：Roco Ethan
这篇文章主要介绍了Vue3 Element Plus表单自定义校验的实现全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、效果
二、实现步骤
1.导入必要的组件和工具：
- 使用
import语句导入Vue3的ref、useRouter，Element Plus的FormInstance类型，以及自定义的接口和API。
import { ref } from "vue";
import type { FormInstance } from 'element-plus'
import { useRouter } from "vue-router";
import { IUser2, IRules } from "@/interfaces/userInterface";
import { loginApi } from "@/apis/userApi";
import { User, Lock } from "@element-plus/icons-vue";2.初始化数据：
- 创建
ref实例user2，用于存储用户名和密码。 - 创建
ref实例ruleFormRef，用于引用表单实例。 - 创建
ref实例rules，定义表单验证规则，如用户名和密码的长度、格式等。
const $router = useRouter();
const user2 = ref<IUser2>({ account: "", password: "" });
const ruleFormRef = ref<FormInstance>()
const rules = ref<IRules>({
account: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ pattern: /^[a-zA-Z0-9]{4,10}$/, message: "用户名包含数字和字母大小写4~10位", trigger: "blur" },
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ pattern: /^[a-zA-Z0-9!@#$%^&*(),._-]{6,12}$/, message: "密码包含数字和字母大小写,特殊字符6~12位", trigger: "blur" }
]
})3.HTML模板：
- 使用
el-form组件，设置ref为ruleFormRef，model为user2，rules为rules。 - 在
el-form-item中使用el-input组件，结合v-model双向绑定数据，并设置prop属性与rules中的属性相对应，用于自动验证。
<el-form class="login_form" ref="ruleFormRef" :model="user2" :rules="rules">
<h1>Hello</h1>
<h2>欢迎来到白宫甄选</h2>
<el-form-item class="login_item" prop="account">
<el-input :prefix-icon="User" placeholder="请输入用户名" v-model="user2.account">
</el-input>
</el-form-item>
<el-form-item class="login_item" prop="password">
<el-input type="password" placeholder="请输入密码" :prefix-icon="Lock"
v-model="user2.password" show-password></el-input>
</el-form-item>
<el-form-item class="login_item">
<el-button class="login_btn" type="primary" @click="submitForm(ruleFormRef)">登陆
</el-button>
</el-form-item>
</el-form>4.自定义校验函数：
- 定义
submitForm函数，接收表单实例作为参数。 - 在函数内部，首先调用
validate方法对表单进行验证。如果验证通过，调用登录API并处理返回结果。如果验证失败，显示错误通知。
const submitForm = (formEl: FormInstance | undefined) => {
if (!formEl) return// 如果未定义表单实例，则直接返回，不执行后续操作
// 验证表单，如果验证通过则调用登录接口
formEl.validate(async(valid) => {
if (valid) {
// 调用登录接口并传入用户信息
const res = await loginApi(user2.value);
console.log(res);
// 根据接口返回结果进行相应操作
if (res.data.code !== 1) {
ElNotification({
title: '登陆失败',
message: '用户名或密码错误',
type: 'error',
})
} else {
// 登录成功，存储token并跳转到首页
localStorage.setItem("token", res.data.data.token);
$router.push("/home");
ElNotification({
title: '登陆成功',
message: '欢迎回来',
type: 'success',
})
}
} else {
// 验证未通过，显示错误通知
ElNotification({
title: '校验',
message: '请输入用户名和账号',
type: 'error',
})
}
})
}三、重置该表单项并移除校验结果
resetFields：
resetFields这个方法在编辑或者修改的时候会出现问题 '重置为初始值'，修改过后初始值依旧在但是可以移除校验效果，想要到达真正的清空表单可以使用watch监听重新把表单对象赋值为空对象。
watch(() => {
return open.value
}, () => {
if (!open.value) {
form.value = {}
}
})四、单词意思
| prop | 在使用了 validate、resetFields 的方法时，该属性是必填的。 |
| required | 是否为必填项。 |
| message | 报错提示消息。 |
| trigger | 验证逻辑的触发方式 ----'blur' | 'change' |
| blur | 失去焦点时进行验证 |
| change | 当值发生变化时进行验证 |
| pattern | 正则表达式，该值必须匹配才能通过验证 |
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。