需求說明：

當添加（注冊）或編輯用戶信息時，需要在用戶名/手機號碼/郵箱等參數填寫后立馬像后臺發送該填寫參數是否在數據庫中已存在，如果存在則返回錯誤信息，并在頁面上顯示錯誤提示。效果如圖：

解決方法：

以校驗手機號碼為例：

1、在data中聲明【?errorMsg1:?"",】該變量用于存儲表單域驗證錯誤信息。并在el-form-item標簽中加入【:error="errorMsg1"】

Form-Item Attributes

error

表單域驗證錯誤信息, 設置該值會使表單驗證狀態變為error，并顯示該錯誤信息

string

2、為該el-form-item中的el-input添加失去焦點事件【@blur="checkMobile"】

Input Events

事件名稱說明回調參數

blur	在 Input 失去焦點時觸發	(event: Event)

在輸入框失去焦點時，當編輯用戶信息-修改手機號碼，修改的手機號碼和原有的號碼不相同及手機號碼不為空的情況下，向后臺發送檢驗。

// 添加/編輯用戶校驗手機號碼是否重復checkMobile() {this.errorMsg1 = ""; //校驗前需情況錯誤信息if (this.userInfoForm.mobile != this.currentMobile &&this.userInfoForm.mobile) {var checkForm = {mobile: this.userInfoForm.mobile};let param = {token: this.$store.state.token,checkUserInfoForm: checkForm};userCheck(param).then(res => {console.log("用戶校驗res", res);if (res.data.respCode != "00000") {this.errorMsg1 = res.data.respDesc; //后臺返回錯誤信息}});}},

【this.currentMobile】從編輯用戶的回顯信息（后臺返回的）中獲得【this.currentMobile?=?res.data.result.mobile;】

ps:案例中的axios被封裝了下，相關的請求方式,url，data,config配置寫在另一個js文件中，如下

// 導入axios import axios from "axios"; // 設置基地址-使用自定義配置新建一個 axios 實例 const http = axios.create({baseURL: "/" });// 檢查用戶信息是否可用 export const userCheck = param => {return http.post("system/user/check", param.checkUserInfoForm, {headers: { accessToken: param.token }}); };

在頁面組件中導入【import?{?userCheck,}?from?"../../api/http";】即可。

3.注意：當關閉添加/編輯對話框時，【?errorMsg1】需要清空，給el-dialog添加【?@close="closeUserINfoForm"】

//關閉添加/編輯用戶對話框closeUserINfoForm() {this.errorMsg1 = "";},

參考：element官網

總結

以上是生活随笔為你收集整理的vue---向后台校验用户名/手机号码/邮箱等唯一性的参数是否被注册的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。