The el-element form form component checks the non-form fields

When writing forms in daily development, you may encounter a value bound in a form-Item that is not in the data object bound to the form

• At this time, it is invalid to bind the field name with prop, and this field needs to be verified separately.

• There is an attribute in form-Item  error . It is used for form field validation error information. Setting this value will change the form validation status to error and display the error message.

Therefore, you can set an error attribute, the initial value is set to empty, and make a judgment when the form is verified. If the field is empty, assign a value to error to prompt text of verification failure. At the same time, add a method when the focus is lost  @blur="checkBirthDate" , and also perform verification when performing form operations.

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