el-element form表单组件 对非表单内字段做校验

在日常开发写表单的时候，可能会遇到某一个form-Item中绑定的值不在表单绑定的数据对象中

• 此时用prop绑定该字段名是无效的，需要单独对这个字段进行校验。

• 在 form-Item 中有一个属性 error 。用于表单域验证错误信息，设置该值会使表单验证状态变为error，并显示该错误信息。

所以，可以设置一个error属性，初始值设为空，在表单校验时做一个判断，如果字段为空时给error赋值校验失败提示文字。同时加一个失去焦点时的方法 @blur="checkBirthDate" ，在进行表单操作时也做校验。

<div v-if="isBreastfeedingLeave" class="row_display row_comumn_2">
    <el-form-item label="出生日期:" :error="birthDateMessage">
        <el-date-picker
            v-model="birthDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择出生日期"
            style="width:180px;"
            @change="calculateExpirationDate"
            @blur="checkBirthDate"
        />
    </el-form-item>
    <el-form-item>
        <el-radio-group v-model="qingjia.twinsNum" @change="changeTwinsNum">
            <el-radio :label="1">单胞胎</el-radio>
            <el-radio :label="2">双胞胎</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item label="请假方式:" prop="bfLeaveType">
        <div>
            <el-checkbox v-model="checkedAM" label="早" border />
            <el-input-number ref="bfLeaveTypeHourAMRef" v-model="qingjia.bfLeaveTypeHourAM" :min="0" :max="bfLeaveTypeHourAMMax" @change="handleChangeAM" />
        </div>
        <div>
            <el-checkbox v-model="checkedPM" label="晚" border />
            <el-input-number ref="bfLeaveTypeHourPMRef" v-model="qingjia.bfLeaveTypeHourPM" :min="0" :max="bfLeaveTypeHourPMMax" @change="handleChangePM" />
        </div>
    </el-form-item>
</div>

 data() {
    return {
      birthDate: null,
      birthDateMessage: '',
    }
  },

methods: {
    // 校验出生日期是否填写
    checkBirthDate(val) {
        console.log(val._props.value)
        if (val._props.value) {
            this.birthDateMessage = ''
        } else {
            this.birthDateMessage = '请选择孩童的出生日期'
        }
    },
    calculateExpirationDate(val) {
        if (val) {
            const year = val.substring(0, 4)
            const lastYear = parseInt(year) + 1
            this.qingjia.expirationDate = lastYear + val.substring(4)
        }
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (!this.birthDate) {
                 this.birthDateMessage = '请选择孩童的出生日期'
            } else if (valid) {
                this.loading = true
                leaveRequest(this.qingjia).then(response => {
                    if (response.code === 200) {
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    })
                    this.$router.push('/process/processlist')
                    }
                }).catch(error => {
                    let message = '服务器发生错误，请稍后重试'
                    console.log(error)
                    if (error.response) {
                        try {
                            message = error.response.data.errors.join(',')
                        } catch (err) {
                            console.log(err)
                        }
                    }
                    this.$message({
                        message: message,
                        type: 'error'
                    })
                }).finally(_ => {
                    this.loading = false
                })
            } else {
                console.log('error submit!!')
                return false
            }
        })
    },
}