vue中使用elementui的時候，進行自定義的表單校驗的時候偶房。出現(xiàn)摆寄，一進入頁面失暴，沒有對輸入框進行任何操作的時候，就觸發(fā)了表單校驗規(guī)則微饥。
如圖:
方法就是在初次渲染頁面的時候往本地存儲存一個值逗扒，然后在自定義校驗規(guī)則中加入，對該值的判斷欠橘。如果不等于該值的話矩肩，整個
? ? if (value ===''&& localStorage.getItem('name')!=='value') { //讀取本地存儲的值，進行判斷
? ? ? ? ?callback (new Error('請?zhí)顚懫髽I(yè)微信賬號'));
? ? ? ? }
判斷就是false肃续，初次進行頁面就不會執(zhí)行該部分代碼了黍檩。
然后就是：
在輸入框中的值進行改變的時候，改變這個判斷始锚。讓它正常進行顯示校驗規(guī)則刽酱。
方法就是：
因為發(fā)現(xiàn)剛 進行頁面的時候，該輸入框會聚焦疼蛾。后期進行輸入框輸入值的時候肛跌，校驗規(guī)則是離焦觸發(fā)的艺配，所以這里給其幫定一個聚集事件察郁，當每次聚焦后，改變本地存儲的值转唉。打破原來的判斷皮钠，進行正常的校驗，離焦就會正常的觸發(fā)赠法，表單校驗規(guī)則麦轰。
結(jié)構(gòu)：
<el-form-item prop="qujingCompanyWechatAccount" label="企業(yè)賬號">
? ? ? ? ? ? ? <el-input? @focus="change" v-model="formData.qujingCompanyWechatAccount" autocomplete="off"></el-input>
? </el-form-item>
js代碼代碼如下：把自定義的規(guī)則寫在了，計算屬性中砖织。
computed: {
? ? //驗證規(guī)則款侵，當編輯功能為false時，不顯示驗證的'*'
? ? rules() { // 參照element-ui的寫法
? ? ? //? 自定義校驗規(guī)則
? ? var validate = (rule, value, callback)=> {
? ? ? ? if (value ===''&& localStorage.getItem('name')!=='value') { //讀取本地存儲的值侧纯，進行判斷
? ? ? ? ?callback (new Error('請?zhí)顚懫髽I(yè)微信賬號'));
? ? ? ? } else {
? ? ? ? ? if (this.formData.companyWechatAccount!==value ) {
? ? ? ? ? ? callback (new Error('兩次輸入密碼不一致'));
? ? ? ? ? } else {
? ? ? ? ? ? callback ();
? ? ? ? ? }
? ? ? ? }
? ? };// 注意這里是分號新锈，代碼這是個函數(shù)，結(jié)束了眶熬。然后在后面寫其自定義的規(guī)則妹笆。
? ? // 觸發(fā)--->自定義的規(guī)則
? ? ? ? qujingCompanyWechatAccount:[
? ? ? ? ? {
? ? ? ? ? ? validator:validate:'',trigger:'blur' //編輯狀態(tài)下才開啟表單驗證功能
? ? ? ? ? }
? ? ? ? ],
// 聚焦事件函數(shù)
methods: {
change () {
? ? console.log('它聚焦了數(shù)據(jù)了')
? ? localStorage.setItem('name','value222') // 隨便改變其值块请，只要大破原來的if判斷條件即可。
? ? },
}
