element ui表单验证失败 valid返回true的问题 记录一下

最新推荐文章于 2024-04-02 11:33:03 发布
最新推荐文章于 2024-04-02 11:33:03 发布
阅读量3.2k 收藏 1
点赞数 2
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44917015/article/details/111031439
版权 
表单验证出错:

一直报true : 可能是页面表单的结构就出了问题；

虽然rules能够对每个el-form 里面的表单 进行校验 但是返回回来的valid只代表 最后一个el-form的状态，

把所有的验证放在最后一个el-form就可以解决；
SpringYoungYu
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
主要介绍了使用element-ui +Vue 解决 table 里包含表单验证的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中使用element-ui进行表单验证的实例代码
08-27
Vue 中使用 Element-UI 进行表单验证的实例代码 Vue 中使用 Element-UI 进行表单验证是许多开发者所面临的挑战，本文将详细介绍如何使用 Element-UI 进行表单验证，并提供了实例代码供参考。 一、简单逻辑验证...
iview Form 表单校验时，必传符号错位，校验无效的某个原因
qq_27312237的博客
09-26 2289
遇到的问题： (1)没加必输校验的formItem,前面会出现必输符号 * , (2)对内容做校验的规则不起作用，this.$refs[name].validate(valid => {}) valid一直都是true,不起作用 解决问题: 我发现原因是因为我偷懒使用 <Row></Row>中放了所有的字段<Col span=”12“> <FormItem> </FormItem> </Col> 注意Form...
element组件库表单校验vaild为true时不生效问题
最新发布
sxy323的博客
04-02 232
1、遇到的问题，当点击确定按钮校验表单的时候不走vaild为true的事件。3、产生原因：自定义检验的时候，没有设置校验成功之后进行回调。4、解决方法：修改自定义校验规则，校验成功进行回调。2、rules配置：有自定义校验规则。
『前端日志』关于element-ui的表单校验validate返回的参数始终为true的问题
mad_house的博客
03-24 6924
最近在用vue+element-ui做简单的项目，遇到了一个百度不到原因的问题（可能是我不会描述问题，也可能是没人犯这么蠢的问题）：在用rules做表单验证的时候，validate函数的返回值valid一直是true，哪怕是错误的校验信息也是。放个官方的代码看一下： <el-form :model="numberValidateForm" ref="numberValidateForm" l...
ElementUI表单校验的validate方法返回参数始终为true的问题
Korbin的博客
03-15 7422
问题描述 按照官方例子调用validate方法： this.$refs.registerForm.validate((valid) => { console.log(valid) if (valid) { // this.registerNext = true } else { return false } }) 发现不管表单中内容是否检验通过，valid参数的值始终为true。 原
【vue】element表单验证——点击提交时，未校验直接通过
hggl_bera的博客
12-17 1398
问题： 点击校验时未通过校验直接通过，如下图所示，直接走valid === true 原因： 暂时未找到，等闲下来好好看看 解决办法： 将trigger: 'blur'改为 trigger: ['blur','change']，问题解决，代码如下 addContactRules: { refEmpId: [{ required: true, message: '请选择', trigger: ['blur','change'] }], phoneNumber: [{ requ
element-ui自定义表单验证
m0_55333789的博客
07-31 102
element-ui自定义表单验证
element ui 中表单验证validate验证成功不执行成功的逻辑代码
m0_65073765的博客
07-11 484
经过自己去官网查看发现是自己写验证的时候疏忽了，下面是自己错误的代码，可以看到如果验证失败，都会调用callback（）方法 ，也是这个方法是触发validate（）方法，所以验证不通过会触发validate（）方法去执行不通过的逻辑，但是如果都通过了却什么都没执行。首先今天做项目时遇到的一个问题，下面代码中，如果上面的验证规则通过但是不会执行验证通过的代码，只有验证不通过才会输出else里的代码。
elementui,form表单验证validate时,false反应,true不反应
qq_38192709的博客
03-04 2798
问题描述： 在使用 element-ui 的时候，this.$refs.表单引用.validate(valid => { }) 方法的时候，false 的时候，有反应，true的时候不显示，也没有报错 问题解决： 在表单验证的时候，validator 方法里面,callback 没有调用，忘记 () 了… … ...
Vue element-ui父组件控制子组件的表单校验操作
10-15
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，包括表单验证。在大型应用中，我们经常需要在父组件中控制子组件的行为，比如触发子组件的表单验证。以下将详细介绍如何实现...
详解element-ui中form验证杂记
10-17
在Element-UI中，表单验证是开发过程中不可或缺的一部分，特别是在构建复杂的后台管理系统时。Element-UI 提供了丰富的表单组件以及相应的验证机制，帮助开发者实现高效且友好的用户体验。本文将深入探讨Element-UI...
element 结合vue 在表单验证时有值却提示错误的解决办法
08-28
Element 结合 Vue 在表单验证时有值却提示错误的解决办法 Element 是一个功能强大的前端 UI 框架，结合 Vue.js 可以快速开发复杂的 Web 应用程序。然而，在使用 Element 结合 Vue 进行表单验证时，有时可能会遇到...
Vue-validate(valid)
m0_51989086的博客
12-28 1881
这样，在提交表单时，validate() 方法会对表单数据按照验证规则进行验证，如果有验证失败的情况，会返回 false并提示错误信息。如果所有验证规则都通过，返回true 并提交数据。1.在Vue组件中，一个名为 valid的 data 属性，它是用于存储表单验证的状态，如果 valid 值为true，则表单提交，如果valid 值为 false，则表单不可以提交。，它可以在表单提交前对表单数据进行验证，如果数据不合法，则可以组织表单提交，从而避免了不必要的错误和数据丢失。4.在表单项中定义验证规则。
VUE 表单验证 ! validate中的内容验证为false时执行,true时不执行
mengziwudao的博客
12-18 5389
作为初学者在VUE表单验证遇到一个大坑 onSubmitaddForm:function( formName ){ let _t = this; this.$refs[formName].validate((valid) => { console.log(123); conso...
vue element form rules表单规则验证，输入框有值，但验证始终不消失问题的个人解决办法
qq_38876396的博客
06-23 5078
本文章对element的表单规则验证中输入框有值，但验证始终不消失的问题，在个人项目的特殊情况下提出解决办法
Vue Element-ui表单校验规则
ahwangzc的博客
02-08 5287
Vue Element-ui表单校验规则
element-ui表单校验不能同步结果的问题
wushuangzhen的博客
11-08 1736
element-ui表单校验不能同步结果的问题
elementUI From表单校验，整体校验和部分校验的使用方法
JSON_J的博客
05-01 9222
elementUI from表单验证
element ui表单验证
08-18
Element UI 提供了强大的表单验证功能，可以轻松地对表单进行验证。下面是一个简单的示例，演示了如何使用 Element UI 进行表单验证： 1. 首先，确保你已经正确引入了 Element UI 库和样式文件。 2. 在表单中添加需要验证的字段，例如： ```html <el-form ref="myForm" :model="formData" :rules="formRules" label-width="100px"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="formData.password"></el-input> </el-form-item> <!-- 其他表单字段 --> </el-form> ``` 3. 在 Vue 组件中，定义表单数据和验证规则： ```javascript data() { return { formData: { username: '', password: '', // 其他表单字段 }, formRules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, // 其他自定义验证规则 ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, // 其他自定义验证规则 ], // 其他表单字段的验证规则 } } } ``` 4. 在提交表单时，调用验证方法 `validate`，例如： ```javascript methods: { submitForm() { this.$refs.myForm.validate((valid) => { if (valid) { // 表单验证通过，可以进行提交操作 } else { // 表单验证失败，提示用户错误信息 } }); } } ``` 以上示例演示了如何使用 Element UI 进行简单的表单验证。你可以根据实际需求，添加更多的验证规则和自定义错误提示信息。更多详细的用法和配置，请参考 Element UI 官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值