Element-ui 自定義表單驗證規則

 

有時在后台我們需要對輸入的數值進行簡單的正則驗證,此時ElementUi 自帶的驗證已不能滿足我們的需求,故需要我們自己去寫 驗證規則

有兩種書寫位置:

• 一種在data中寫規則
• 另一種在methods中寫規則

 

表單:

<el-form-item label="需求砍價人數：" prop="haggleNumber">
       <el-input v-model="formData.haggleNumber" clearable>        
       </el-input>
</el-form-item>    

 

方法一: 在data中寫規則

data() {
    // 自定義校驗規則
    var bargainMoney = (rule, value, callback) => {
      // rule 對應使用bargainMoney自定義驗證的 對象
      // value 對應使用bargainMoney自定義驗證的 數值 
      // callback 回調函數
      const r = /^\+?[1-9][0-9]*$/; // 正整數
      if (value == null || String(value).trim() === "") {
        callback(new Error("不能為空"));
      } else if (!r.test(value)) {
        callback(new Error("請輸入正整數"));
      }else {
        callback();
      }
    };
　　

　　 return {

      formData: {

        haggleNumber: "", // 砍價人數

      },

      rules: {

        haggleNumber: [

          {

            required: true,

            validator: bargainMoney,

            trigger: "blur"

          }

        ],

      }

　　 }

}

 

方法二: 在methods中寫規則

data() {
　return {
      formData: {
        haggleNumber: "", // 砍價人數
      },
      rules: {
        haggleNumber: [
          {
            required: true,
            validator: this.bargainMoney,
            trigger: "blur"
          }
        ],
      }
　}
},
methods: {
    // 自定義校驗規則
    bargainMoney(rule, value, callback){
      // rule 對應使用bargainMoney自定義驗證的 對象
      // value 對應使用bargainMoney自定義驗證的 數值 
      // callback 回調函數
      const r = /^\+?[1-9][0-9]*$/; // 正整數
      if (value == null || String(value).trim() === "") {
        return callback(new Error("不能為空"));
      } else if (!r.test(value)) {
        return callback(new Error("請輸入正整數"));
      }else {
        return callback();
      }
    },
}

 

二者的區別在於:

• 在data 中不需要通過 return 回調函數,而在 methods 中則需要
• 在methods中寫的驗證規則 ,需要在rules中配置規則時通過 this獲取

 

分享一刻:

　　國內數一數二的代碼托管平台,一起來為國內開源生態貢獻一份力量吧 

　　Gitee