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

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

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

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

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

    
        
    
    
        
            单胞胎
            双胞胎
        
    
    
        

            
            
        
        

            
            
        
    

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