el-form验证问题

发布时间:2024年01月14日

1.如果第一次打开el-dialog有验证失败,重新打开el-dialog仍然会有验证失败

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

2.手动控制验证状态

error:错误信息
validate-status:验证状态。 success 验证成功, error验证失败, validating验证中,''未验证

<el-form-item 
	:error="validateFormState.error" 
	:validate-status="validateFormState.state">
</el-form-item>
// 在验证成功或者失败的时候去手动控制error和validate-status的值即可。

3.编辑界面验证这行数据的正确值验证失败

后端根据传送的值验证是否可用,但是在编辑界面中,这条数据的正确值也会被送到后端进行验证(这里新增和编辑使用了同一个组件),所以会出现验证失败问题。

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 否则同样验证不通过

文章来源:https://blog.csdn.net/Zing_ing/article/details/135568589
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。