el-form验证问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-form验证问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>