Vue3 Element Plus表單自定義校驗(yàn)的實(shí)現(xiàn)全過程

更新時(shí)間：2025年04月03日 10:22:47 作者：Roco Ethan

這篇文章主要介紹了Vue3 Element Plus表單自定義校驗(yàn)的實(shí)現(xiàn)全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、效果

二、實(shí)現(xiàn)步驟

1.導(dǎo)入必要的組件和工具：

使用import語句導(dǎo)入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.初始化數(shù)據(jù)：

創(chuàng)建ref實(shí)例user2，用于存儲(chǔ)用戶名和密碼。
創(chuàng)建ref實(shí)例ruleFormRef，用于引用表單實(shí)例。
創(chuàng)建ref實(shí)例rules，定義表單驗(yàn)證規(guī)則，如用戶名和密碼的長(zhǎng)度、格式等。

const $router = useRouter();
const user2 = ref<IUser2>({ account: "", password: "" });
const ruleFormRef = ref<FormInstance>()
const rules = ref<IRules>({
  account: [
    { required: true, message: "請(qǐng)輸入用戶名", trigger: "blur" },
    { pattern: /^[a-zA-Z0-9]{4,10}$/, message: "用戶名包含數(shù)字和字母大小寫4~10位", trigger: "blur" },
  ],
  password: [
    { required: true, message: "請(qǐng)輸入密碼", trigger: "blur" },
    { pattern: /^[a-zA-Z0-9!@#$%^&*(),._-]{6,12}$/, message: "密碼包含數(shù)字和字母大小寫,特殊字符6~12位", trigger: "blur" }
  ]
})

3.HTML模板：

使用el-form組件，設(shè)置ref為ruleFormRef，model為user2，rules為rules。
在el-form-item中使用el-input組件，結(jié)合v-model雙向綁定數(shù)據(jù)，并設(shè)置prop屬性與rules中的屬性相對(duì)應(yīng)，用于自動(dòng)驗(yàn)證。

<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="請(qǐng)輸入用戶名" v-model="user2.account"> 
       </el-input>
   </el-form-item>
   <el-form-item class="login_item" prop="password">
      <el-input type="password" placeholder="請(qǐng)輸入密碼" :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.自定義校驗(yàn)函數(shù)：

定義submitForm函數(shù)，接收表單實(shí)例作為參數(shù)。
在函數(shù)內(nèi)部，首先調(diào)用validate方法對(duì)表單進(jìn)行驗(yàn)證。如果驗(yàn)證通過，調(diào)用登錄API并處理返回結(jié)果。如果驗(yàn)證失敗，顯示錯(cuò)誤通知。

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return// 如果未定義表單實(shí)例，則直接返回，不執(zhí)行后續(xù)操作

  // 驗(yàn)證表單，如果驗(yàn)證通過則調(diào)用登錄接口
  formEl.validate(async(valid) => {
    if (valid) {
      // 調(diào)用登錄接口并傳入用戶信息
      const res = await loginApi(user2.value);
      console.log(res);
      
      // 根據(jù)接口返回結(jié)果進(jìn)行相應(yīng)操作
      if (res.data.code !== 1) {
        ElNotification({
          title: '登陸失敗',
          message: '用戶名或密碼錯(cuò)誤',
          type: 'error',
        })
      } else {
        // 登錄成功，存儲(chǔ)token并跳轉(zhuǎn)到首頁
        localStorage.setItem("token", res.data.data.token);
        $router.push("/home");
        ElNotification({
          title: '登陸成功',
          message: '歡迎回來',
          type: 'success',
        })
      }
    } else {
      // 驗(yàn)證未通過，顯示錯(cuò)誤通知
      ElNotification({
          title: '校驗(yàn)',
          message: '請(qǐng)輸入用戶名和賬號(hào)',
          type: 'error',
        })
    }
  })
}

三、重置該表單項(xiàng)并移除校驗(yàn)結(jié)果

resetFields：

resetFields這個(gè)方法在編輯或者修改的時(shí)候會(huì)出現(xiàn)問題 '重置為初始值'，修改過后初始值依舊在但是可以移除校驗(yàn)效果，想要到達(dá)真正的清空表單可以使用watch監(jiān)聽重新把表單對(duì)象賦值為空對(duì)象。

watch(() => {
    return open.value
}, () => {
    if (!open.value) {
        form.value = {}
    }
})

四、單詞意思

prop	在使用了 validate、resetFields 的方法時(shí)，該屬性是必填的。
required	是否為必填項(xiàng)。
message	報(bào)錯(cuò)提示消息。
trigger	驗(yàn)證邏輯的觸發(fā)方式 ----'blur' \| 'change'
blur	失去焦點(diǎn)時(shí)進(jìn)行驗(yàn)證
change	當(dāng)值發(fā)生變化時(shí)進(jìn)行驗(yàn)證
pattern	正則表達(dá)式，該值必須匹配才能通過驗(yàn)證