Vue3 Element Plus表单自定义校验的实现全过程

从玛丽

一、效果

二、实现步骤

1.导入必要的组件和工具：

• 使用
  1. import

  复制代码
  语句导入Vue3的
  1. ref

  复制代码
  、
  1. useRouter

  复制代码
  ，Element Plus的
  1. FormInstance

  复制代码
  类型，以及自定义的接口和API。
  

1. import { ref } from "vue";
   
2. import type { FormInstance } from 'element-plus'
   
3. import { useRouter } from "vue-router";
   
4. import { IUser2, IRules } from "@/interfaces/userInterface";
   
5. import { loginApi } from "@/apis/userApi";
   
6. import { User, Lock } from "@element-plus/icons-vue";

复制代码

2.初始化数据：

• 创建
  1. ref

  复制代码
  实例
  1. user2

  复制代码
  ，用于存储用户名和密码。
  
• 创建
  1. ref

  复制代码
  实例
  1. ruleFormRef

  复制代码
  ，用于引用表单实例。
  
• 创建
  1. ref

  复制代码
  实例
  1. rules

  复制代码
  ，定义表单验证规则，如用户名和密码的长度、格式等。
  

1. const $router = useRouter();
   
2. const user2 = ref<IUser2>({ account: "", password: "" });
   
3. const ruleFormRef = ref<FormInstance>()
   
4. const rules = ref<IRules>({
   
5.   account: [
   
6.     { required: true, message: "请输入用户名", trigger: "blur" },
   
7.     { pattern: /^[a-zA-Z0-9]{4,10}$/, message: "用户名包含数字和字母大小写4~10位", trigger: "blur" },
   
8.   ],
   
9.   password: [
   
10.     { required: true, message: "请输入密码", trigger: "blur" },
    
11.     { pattern: /^[a-zA-Z0-9!@#$%^&*(),._-]{6,12}$/, message: "密码包含数字和字母大小写,特殊字符6~12位", trigger: "blur" }
    
12.   ]
    
13. })

复制代码

3.HTML模板：

• 使用
  1. el-form

  复制代码
  组件，设置
  1. ref

  复制代码
  为
  1. ruleFormRef

  复制代码
  ，
  1. model

  复制代码
  为
  1. user2

  复制代码
  ，
  1. rules

  复制代码
  为
  1. rules

  复制代码
  。
  
• 在
  1. el-form-item

  复制代码
  中使用
  1. el-input

  复制代码
  组件，结合
  1. v-model

  复制代码
  双向绑定数据，并设置
  1. prop

  复制代码
  属性与
  1. rules

  复制代码
  中的属性相对应，用于自动验证。
  

1. <el-form class="login_form" ref="ruleFormRef" :model="user2" :rules="rules">
   
2.    <h1>Hello</h1>
   
3.    <h2>欢迎来到白宫甄选</h2>
   
4.    <el-form-item class="login_item" prop="account">
   
5.        <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="user2.account">
   
6.        </el-input>
   
7.    </el-form-item>
   
8.    <el-form-item class="login_item" prop="password">
   
9.       <el-input type="password" placeholder="请输入密码" :prefix-icon="Lock"                                   
   
10.         v-model="user2.password" show-password></el-input>
    
11.    </el-form-item>
    
12.    <el-form-item class="login_item">
    
13.       <el-button class="login_btn" type="primary" @click="submitForm(ruleFormRef)">登陆
    
14.       </el-button>
    
15.    </el-form-item>
    
16. </el-form>

复制代码

4.自定义校验函数：

• 定义
  1. submitForm

  复制代码
  函数，接收表单实例作为参数。
  
• 在函数内部，首先调用
  1. validate

  复制代码
  方法对表单进行验证。如果验证通过，调用登录API并处理返回结果。如果验证失败，显示错误通知。
  

1. const submitForm = (formEl: FormInstance | undefined) => {
   
2.   if (!formEl) return// 如果未定义表单实例，则直接返回，不执行后续操作
   
3. 
   
4.   // 验证表单，如果验证通过则调用登录接口
   
5.   formEl.validate(async(valid) => {
   
6.     if (valid) {
   
7.       // 调用登录接口并传入用户信息
   
8.       const res = await loginApi(user2.value);
   
9.       console.log(res);
   
10.       
    
11.       // 根据接口返回结果进行相应操作
    
12.       if (res.data.code !== 1) {
    
13.         ElNotification({
    
14.           title: '登陆失败',
    
15.           message: '用户名或密码错误',
    
16.           type: 'error',
    
17.         })
    
18.       } else {
    
19.         // 登录成功，存储token并跳转到首页
    
20.         localStorage.setItem("token", res.data.data.token);
    
21.         $router.push("/home");
    
22.         ElNotification({
    
23.           title: '登陆成功',
    
24.           message: '欢迎回来',
    
25.           type: 'success',
    
26.         })
    
27.       }
    
28.     } else {
    
29.       // 验证未通过，显示错误通知
    
30.       ElNotification({
    
31.           title: '校验',
    
32.           message: '请输入用户名和账号',
    
33.           type: 'error',
    
34.         })
    
35.     }
    
36.   })
    
37. }

复制代码

三、重置该表单项并移除校验结果

• 1. resetFields

  复制代码
  ：
  

resetFields这个方法在编辑或者修改的时候会出现问题 '重置为初始值'，修改过后初始值依旧在但是可以移除校验效果，想要到达真正的清空表单可以使用watch监听重新把表单对象赋值为空对象。

1. watch(() => {
   
2.     return open.value
   
3. }, () => {
   
4.     if (!open.value) {
   
5.         form.value = {}
   
6.     }
   
7. })

复制代码

四、单词意思

prop	在使用了 validate、resetFields 的方法时，该属性是必填的。
required	是否为必填项。
message	报错提示消息。
trigger	验证逻辑的触发方式 ----'blur' | 'change'
blur	失去焦点时进行验证
change	当值发生变化时进行验证
pattern	正则表达式，该值必须匹配才能通过验证

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持晓枫资讯。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！