element-ui 表单校验 this.$refs[formName].validate() 不执行 解决方案

最新推荐文章于 2022-04-12 10:51:40 发布
最新推荐文章于 2022-04-12 10:51:40 发布
阅读量2.6k 收藏 3
点赞数 2
分类专栏： element 坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Damon99999/article/details/99304271
版权

1: 确保每一个prop都写在<el-form-item>标签上
eg: <el-form-item label=" " prop="checked" >

2:确保每个验证函数一定调用了callback()函数，不管通过与否都必须调用callback()回调函数！！！

3:打印this.$refs[formName]看能不能取到，如果不行说明没有取到，重新检查一下ref是否是唯一

Damon_99999
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element ui -- 带自定义验证的表单 this.$refs[formName].validate()里面的内容不执行
liushan633的博客
12-10 2612
项目需要自定义验证，需要验证的参数都是后端传过来的， 如果传过来的是数字，就要根据后端返回的min和max验证数字大小，但是element ui没有验证数字大小的方法，但是可以自定义验证规则（官网给的自定义验证方法不能传参），所以有了下面的方法 rules.push({ validator: (rule, value, callback) =&gt; { if(min &amp...
elementui el-form自定义校验规则后表单验证this.$refs[formName].validate不生效的问题
有没有认真工作的博客
12-11 861
明明我输入的值是符合规则的，但是点击确定硬是没有任何反馈，原来是通过验证的时候我少了return callback()
element ui -- 表单验证 this.$refs[formName].validate()里面的内容不执行
qq_19587639的博客
06-08 1272
网上说的一般有以下几种情况： 1、prop没有卸载el-item-from上。 2、this.$refs.from是undefind。 3、我的是把el-from上的 :model="form" 写成了 v-model="form"所以执行没有效果。
vue项目中iview表单验证 this.$refs[name].validate(valid => { }无效
weixin_30276935的博客
04-10 1271
验证成功的时候没有添加 callback(); 加上该方法就可以了 转载于:https://www.cnblogs.com/qiandong1933/p/qiandong19333.html
Vue-element中表单自定义校验的this.$refs[formname].validate不生效
HTML5_student的博客
12-20 1万+
今天遇到的问题 在做表单提交的时候，会出现this.$refs[formname].validate方法不生效，通过debug，原来是校验那里出了问题。 在表单规则制定那里我需要自定义校验，用到了validator属性，使用这个的时候要注意一个地方，就是必须要返回一个回调函数。 使用valiator校验规则时，切记一定要返回一个回调函数，使用了if，即使没有else的需求，也要写一个else返回回调函数。否则表单的validate是不会生效的 model : 绑定整个表单model值 rules : 整个表
关于vue.js element ui 表单验证 使用this.$refs[formName].validate()
qq_41008567的博客
04-21 1万+
实现form表单提交验证功能 model : 绑定整个表单model值 rules : 整个表单校验规则 ref ：获取该表单form组件 prop : 绑定每个表单的规则，写在el-form-item上 validate : 对整个表单进行校验的方法 valid : 每个必填表单项都提交为true,否则为false 1、简易版 表单提交 //使用element-ui 页面组件 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label
vue-element-ui 中使用 el-form 报错 “TypeError: this.$refs[formName] is undefined“
Anicer1219的博客
04-16 3102
情况说明：使用了 element-ui 里面 <el-form></el-form> 创建了个表单，但是取数据的时候，老是报错"TypeError: this.$refs[formName] is undefined"。按照网上搜来的在 mounted() 里面添加，但是没用啊。大好江山一片红，大家看看 前奏：皇天不负有心人，观察之前，也出现过这样的 bug，比如在这个 <img />标签里面按理说可以显示图片 <img :v-image-preview="
Vue element-ui父组件控制子组件的表单校验操作
10-15
在这个方法里，我们调用了`this.$refs['childRules'].validateForm()`来执行子组件的表单验证。如果验证成功（返回`true`），则进一步处理保存操作；否则，显示错误消息。 ```javascript methods: { saveForm() { ...
Vue自定义组件使用Element-ui表单校验
qq_42731434的博客
07-17 2452
一般情况下(form中的组件都是element提供的组件)在使用elm的表单校验时我们是这么使用的：// 栗子.vue <template> <el-form :model="formData" :rule="rules" ref="formRef"> <el-form-item prop="inputValue"> <el-input v-model="formData.inputValue"></el-
element - ui 表单提交中使用await报错
versious的博客
08-14 857
正确写法：要在valid前面使用async /**提交 */ handleSubmit() { this.$refs["form"].validate(async valid => { if (valid) { await this.handleUploadFile(); } ApiUpdateOrganBrand(this.f
Vue中this.$refs[formName].validate((valid) =＞{}不执行的错误
hhb442的博客
04-10 4279
今天遇到一个this.$refs[formName].validate((valid) =>{} 无效的问题 当验证通过的时候点确定按钮没有报错，也没有任何反应 代码： 当验证不通过的时候：第632行有打印false 但是当验证都通过的时候：第632行没有打印 如果是这种情况就要考虑是在做验证的时候出错啦！ 每一个 if 都要对应了一个 else 并且每个条件 下 都要 callback 确保 在不同情况下 都会执行callback 所以要在验证时加上else的callback() ...
element-ui 表单校验 this.$refs[formName].validate() 不执行
weixin_42694925的博客
07-16 1596
点击提交按钮 没有触发this.$refs[formName].validate()，排查后发现表单自定义校验中校验通过的没有写callback()； callback是回调函数，每个判断结束，不管通过校验还是没有通过校验，语句后面要callback（）结果给validate，不然validate会一直等待返回的回调，不往下执行代码。 ...
自定义rule 提交时this.$refs[formName].validate((valid) =＞ 不生效
weixin_44707050的博客
08-04 943
自定义rule: var checksealevel = (rule, value, callback) => { if (!value) { return callback(new Error("请输入")); } else { if (Number(value) <= 4000) { const regexp = /^-?[1-9]\d*$|^0$/; if (!regexp.test(Nu
element-ui的表单验证this.$refs[formName].validate的代码不执行
weixin_30848775的博客
08-13 473
经过排查，如果自定义验证中，每种情况都要写明确和有回调函数callback var validatePhone = (rule, value, callback) => { const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;...
element ui 表单验证 this.$refs[formName].validate()里面的内容死活不执行
qq_43490372的博客
12-28 1268
element ui 表单验证 this.$refs[formName].validate()里面的内容死活不执行 如图，代码一直不执行下面。 最主要的原因就是我们设置了自定义验证里面每一个判断都要有callback(),就是要保证最后执行到的是callback(),我是因为用了if elseif 忽略了最后的else中的callback。 解决办法就是必须加上callback()； ...
element表单中自定义规则验证输入内容this.$refs[‘formName‘].validate验证不通过
Ling_jing20的博客
09-01 2312
项目场景：eleement表单中输入内容this.$refs[‘dialogForm’].validate验证不通过 问题描述： element中使用自定义验证时，输入内容符合规则，也验证不通过 submitForm() { // 提交表单按钮 if (this.checked === false) { this.$message({ type: 'warning', message: '请阅读并勾选协议，否则无法提交加盟申请！'
在表单验证当中，this.$refs.form.validate方法不执行
热门推荐
qq_37418556的博客
07-15 1万+
在表单验证当中，this.$refs.form.validate方法不执行 addUser() { console.log(12); // 可以执行 this.$refs.addFormRef.validate((valid) => { console.log(valid); // 不执行 }); } 注：html代码如下 <el-dialog title="添加用户" :visible.sync="addDialogVisible" wi
element中表单form验证必填，成功之后不进入validate方法
熬夜搬码员的博客
04-12 1561
问题：登录form表单必填验证的时候，验证错误会进入validate方法，反而验证成功后不进入了。 代码如下： 解决：最后发现是密码验证方法中没有写成功之后的回调函数，即要在else if后面写上else{callback（）}执行回调函数 ...
vue中element-ui清除表单校验
最新发布
05-24
在vue中使用element-ui进行表单校验时，可以通过调用`this.$refs.formName.resetFields()`来清除表单的校验状态。其中`formName`为表单的ref属性值。 示例代码如下： ```html <el-form :model="form" :rules=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值