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

在頁面中書寫如下：

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

在vue 初始化data中

1  filterForm: {
 
2     firstDay: ‘‘,
3     lastDay: ‘‘
4 },
5  rules: {
6     firstDay: [{ type: ‘string‘, required: true, message: ‘請選擇日期範圍‘, trigger: ‘submit‘ }],
7     lastDay: [{ type: ‘string‘, required: true, message: ‘請選擇日期範圍‘, trigger: ‘submit‘ }],
8  }

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

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

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

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

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

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

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