<div>
<el-dialog width="50%" title="对象信息" :visible.sync="dialogFormVisible" @close="closedialog">
<UploadFile ref="child"></UploadFile>
</el-dialog>
</div>
解决方案:
给el-dialog绑定close事件,并调用clearValidate()
closedialog () {
this.$refs.child.$refs.formdata.clearValidate();
},
error:错误信息
validate-status:验证状态。 success 验证成功, error验证失败, validating验证中,''未验证
<el-form-item
:error="validateFormState.error"
:validate-status="validateFormState.state">
</el-form-item>
// 在验证成功或者失败的时候去手动控制error和validate-status的值即可。
后端根据传送的值验证是否可用,但是在编辑界面中,这条数据的正确值也会被送到后端进行验证(这里新增和编辑使用了同一个组件),所以会出现验证失败问题。
var validateNum = async (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入版本号'));
} else if (value === this.versionNum) {
callback();
} else {
var val = await this.onBlur();
if (val) {
callback();
} else {
callback(new Error('版本号不可用'));
}
}
}
增加一个条件进行判断
调用函数进行验证:
// 对整个表单进行验证
this.$refs.formdata1.validate(valid=>{
// 验证成功则valid为true
})
//对部分字段进行验证
validateField
父组件调用子组件中的ref:this.$refs.child.$refs.formdata.clearValidate()
el-form 提供了表单校验功能, :rules 属性设置校验规则,并通过 el-form-item 的 prop 属性绑定校验规则。
el-form 的 model 是 formData,那么 el-form-item 中所有需要校验的表单的 的 model 也必须是 formData.xxx ,即 formData 对象的直接属性。
需要注意的是,如果要用 rules 进行表单校验,那么 el-input 绑定的元素必须是 el-form 的 model 的直接属性,否则会导致校验失败。
el-input默认值的类型是字符串类型,输入即使是数字,也被el-input 自己处理成了字符换数字。
解决办法:
<el-form-item class="base_block" label="渠道号" prop="channelId" label-width="40%">
<el-input type='number' class="el_input_box" v-model.number="channel.baseConfDetail.channelId" :disabled="!isEdit"/>
</el-form-item>
设置type=‘number’,v-model 需要更改为 v-model.number 否则同样验证不通过