element-ui Form表單校驗小結及踩坑

1、要驗證輸入只能為數字時

、

 方法一

如果使用type=“number”樣式這邊去掉type=number時自帶的屬性

/* 去除webkit中input的type="number"時出現的上下圖標 */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"] {
        -moz-appearance: textfield;
    }

也可以用自帶的rules校驗，這邊就統一提交的時候，校驗

 其中我們也可以用自帶的len屬性限制長度，min限制最少長度，max限制最大長度，len優先級大於min、max，

具體驗證規則見https://github.com/yiminghe/async-validator

 

 2.整體校驗時，可以寫方法校驗；

 

 

 

 

 

 3.根據條件判斷表單里的 某一項動態變化是否必填；

示例如下：

 

 

 效果如下

 

 

 踩坑之路：

本打算通過動態判斷prop的值來進行動態校驗，但是這樣*雖然會根據前面的條件而動態顯示隱藏，但是rules中的驗證不生效

 

 

以上方法只是動態修改了props屬性，而並未出發表單的重新渲染，驗證器中的prop屬性並未更新，還是初次渲染時的空值，知道原因就想到了解決辦法。

解決方法：

方法一：
動態響應的改變required的值；在rules里面可以不用加 requied

 

 

data里面的rules

 

 

 雖然這樣可以動態控制必填跟非必填，但是必填是提示的  xxxx is required，這時候可以通過自定義validator來解決，默認提示，在data里面定義isEntrust

 /***********************************************************2020.11.13補充*********************************************/

提示語也可以直接引用表單rules規則校驗那么的message

 

 

  /***********************************************************2020.11.13補充結束*********************************************/

 

 還有一個問題，就是有時候必填轉換為非必填時，提示語還是存在，可以單獨進去清除

  /***********************************************************2020.11.13補充*********************************************/

當多個校驗需要去掉時，可以對去掉校驗結果進行方法封裝

getRefs (data) {
                data.map(item => {
                    this.$refs[item].clearValidate() // 移除校驗結果
                })
            },

調用

 

 

 

   /***********************************************************2020.11.13補充結束*********************************************/

 

 綜上可以解決

方法二：

直接改變當前對應項的 rules ;寫對應需要的兩套校驗條件

 

 

 

方法三：

通過v-if和v-else寫兩個表單項，一個帶prop屬性，一個不帶prop屬性，通過強制銷毀和創建表單實現表單的重新渲染需要加key（diff算法會復用組件，並沒有重新渲染，需要加key）。

 

 

 

另外一種參考 https://blog.csdn.net/mineblogjw/article/details/85120384    https://www.jb51.net/article/159108.htm

補充簡單好用的方法

直接通過提交的時候對單獨的form里面的rules進行修改

 

 

   /***********************************************************2020.11.20補充*********************************************/

推薦

用以上方法的時候，怎么給el-form.item加紅色必填*好呢？？？，這個時候不能直接設置：require的true或者false，因為這個時候，你填完數值，后面再你刪除的時候，必填會先跳出原生的英文提示,再中午提示

 

 

 

效果如下，雖然可以檢驗必填，但是提示語不是我們想要的

 

 

修改為方法，紅色*用來來控制

 

 

 

如果為多個變量動態填寫，可以使用如下方法來控制是否必填檢驗

 

 data里面自定義校驗

 

 rules

 

 

 

   /***********************************************************2020.11.20補充結束*********************************************/

引申  

需求，根據不同的用戶類型，做不同的校驗，可以通過控制不同的rules來進行校驗判斷

let rulse = {
       'type1' :{
             驗證名稱:[]
        }
}

然后公共部分publicRules寫在一起，切換不同類型的時候不同地方讀取rules類型插入拼接

4.取消部分表單字段校驗結果;

 

 

 

5.resetFields與clearValidate方法

//根據需求二選一

this.$refs[refElement].resetFields(); //移除校驗結果並重置字段值
  this.$refs[refElement].clearValidate(); //移除校驗結果

6.同時校驗多個表單

方法一：

//校驗表單1
      var p1=new Promise(function(resolve, reject) { 
            this.$refs[form1].validate((valid) => {
                if（valid）{
                    resolve();
                }
            })
        });
        //校驗表單2
        var p2=new Promise(function(resolve, reject) {
             this.$refs[form2].validate((valid) => {
              if（valid）{
                resolve();
              }
            })
        }); 
        
        Promise.all([p2,p1]).then(function(){
            alert("驗證通過了");
        });

方法2

    this.$refs[form1].validate((valid) => { 
                if (valid) {
                  this.form1= true
                }
              });
         this.$refs[form2].validate((valid) => {
                if(valid){
                   this.form2= true
                } 
            });
          if (this.form1&& this.form2) {
             alert("驗證通過了")
           } 

7.校驗的幾個方法

 

 

 

對於表單中部分字段的校驗看如下的代碼，當校驗不通過時phoneError返回值為校驗的提示信息，當通過時phoneError的值為空，所以if語句中用(！phoneError）表示校驗通過，完整代碼及頁面展示圖如上。

sendMsg(phoneNum) {
    this.$refs.thirdForm.validateField('phone', (phoneError) => {
        if(!phoneError){
            //當校驗通過時，這里面寫邏輯代碼
        }
    })
};