在日常开发写表单的时候,可能会遇到某一个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
}
})
},
}