elementui的async-validator驗證數字類型的探究

 現在的項目在使用elementui的做表單驗證的時候，框架默認使用的是async-validator，但是很多坑在這裏！今天記錄下怎麼驗證number類型的輸入值。

<el-form-item label="聯繫電話：" style="margin-left:20px" prop="tel">
     <el-input v-model="form.tel" style="width:400px"></el-input>
</el-form-item>

驗證規則

    tel: [
          {
            required: true,
            message: "電話不能爲空",
            trigger: "change,blur"
          },
          {
            min: 1,
            max: 11,
            type: "number",
            message: "必須爲11位數字"
          }
        ]

經測試，第一條驗證時可以觸發的。

第二條規則在我們輸入數字的時候也不能通過驗證

主要時input框輸入的都是string類型，即使用vue默認的v-model.number也不起作用。這個坑大了！！！！！！！！！！！

放棄嗎？當然想過，但是作爲一個負責任的前端er,必須想辦法解決！不到萬不得已不能無視這種坑！

於是就有了下面的解決方案：

         {
            min: 10000000000,
            max: 20000000000,
            type: "number",
            message: "必須爲11位數字",
            transform: value =>
              this.$options.filters.formValidateFun(value, "number")
          }

此外我們的自定義指令:

import Vue from "vue";
Vue.filter("formValidateFun", (value, type) => {
  value = (value + "").replace(/(^\s*)|(\s*$)/g, ""); // 先去除前後空格，排除都是空格的情況
  switch (type) {
    case "number":
      value = value || value === 0 ? Number(value) : "";
      break;
  }
  return value;
});

測試結果：

完全輸入數字

這樣就通過了驗證！！

注意點:

1.min，max在type爲string類型的時候指的是字符串長度；

2.在type爲number時指的是最大值，最小值，我這裏的是驗證電話號碼，所以取的是11位數字最大最小值，嚴謹點還要對電話格式做正則判斷！！