Element 中表单非必填数据项 必须为数字的验证问题

Posted 2020-10-31 开尔

element-ui 表单验证问题

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)
            }
          }]
        }

这样在提交的时候，就不会因为用户没有输入任何数值，提示警告信息了。