el-form验证问题

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

html 复制代码
<div>
	<el-dialog width="50%" title="对象信息" :visible.sync="dialogFormVisible" @close="closedialog">
		<UploadFile ref="child"></UploadFile>
	</el-dialog>
</div>

解决方案:

给el-dialog绑定close事件,并调用clearValidate()

javascript 复制代码
 closedialog () {
      this.$refs.child.$refs.formdata.clearValidate();
},

2.手动控制验证状态

error:错误信息

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

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

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

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

javascript 复制代码
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('版本号不可用'));
     }
   }
 }

增加一个条件进行判断

拓展

调用函数进行验证:

javascript 复制代码
// 对整个表单进行验证
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 自己处理成了字符换数字。

解决办法:

html 复制代码
<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 否则同样验证不通过

相关推荐
WEI_Gaot几秒前
React 19 Props 和 react-icons 和 事件处理函数
前端·react.js
10年前端老司机几秒前
微信小程序模板语法和事件
前端·javascript·微信小程序
龙在天几秒前
Promise.withResolvers() vs 传统 Promise:谁更胜一筹?
前端
xinhong几秒前
Vue3 学习笔记
前端
Evenknow1 分钟前
将"修改源码"改为更专业的"二次开发",体现技术深度
前端·github
khalil2 分钟前
浅析TS枚举与位运算的结合
前端·typescript
yanglei2 分钟前
electron-updater 核心源码解析
前端
攻城狮的大师兄2 分钟前
红宝书(第四版)通读之查漏补缺
javascript
神仙别闹4 分钟前
基于Java+MySQL 实现(Web)日程管理系统
java·前端·mysql
布列瑟农的星空7 分钟前
webworker 实践:外部依赖引入和打包问题
前端·低代码