Element 中表單非必填數據項 必須為數字的驗證問題

Element-ui 的el-form組建中，自帶基本的驗證功能，比如某些項必填的驗證，直接加入rules 規則中即可，如下實例：

在頁面中書寫如下：

<el-form-item label="月份：" prop="firstDay">
   <common-month-select :year="year" @monthChange="monthChange" :selectMonth="selectMonth"></common-month-select>
</el-form-item>

在vue 初始化data中

 filterForm: {
    firstDay: '',
    lastDay: ''
},
 rules: {
    firstDay: [{ type: 'string', required: true, message: '請選擇日期范圍', trigger: 'submit' }],
    lastDay: [{ type: 'string', required: true, message: '請選擇日期范圍', trigger: 'submit' }],
 }

這樣就會對日期進行必填驗證。

但是現在遇到一個這樣的問題，表單中有一個數據，比如是數字，但是又非必填項，這時候直接使用上面的方式進行驗證，就會出現問題。

  比如，如果沒有填寫數字，提交表單的時候就會提示設定的警告信息，這不是我們想要的，因為是非必填項，所以當用戶不填寫的時候，應該也可以直接提交，填寫的時候，驗證必須是數字即可。

 

解決方案：在rules 中驗證這個功能的時候，對填寫的數值進行判斷

 rules: {
          averageCaseRunTime: [{
            type: 'number',
            trigger: 'blur',
            required: false,
            message: '平均用例運行時長必須為數字值',
            transform (value) { return _.toNumber(value) }
          }]
        }

這樣在提交的時候，就不會因為用戶沒有輸入任何數值，提示警告信息了。