form表单校验可能出现的问题及解决方案

最新推荐文章于 2024-03-08 11:06:31 发布
最新推荐文章于 2024-03-08 11:06:31 发布
阅读量2k 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/C422805/article/details/132236116
版权

基于elementUi的el-form的校验

表单校验目的: 在防止用户犯错的前提下,尽可能让用户更早地发现并纠正问题.

  1. 表单校验不生效或有误
  2. 表单校验规则更改之后立即触发校验,导致体验感不佳
  3. dialog或者drawe中使用表单,一进入就会触发表单的校验

以上几种情况是目前项目中可能遇到的情况最多的.针对以上问题一一给出解决方案

1. 表单校验不生效或有误
  • 检查model绑定是否正确
  • 检查el-form-item中的prop是否正确
  • 检查rules中的name是否和el-form-item中的prop一致
2. 表单校验规则更改之后立即触发校验
  • el-form提供了一个属性  validate-on-rule-change:默认是true,所以如果不想要校验规则更改之后就立即触发就可以将该属性设置为false
3. dialog或者drawer中使用表单,一进入就触发表单校验
  • 在el-dialog或el-drawer的close回调函数中,将form对象重置为初始值(即跟data中的值相同)接下来在$nexttick中使用el-form的清除表单校验结果的事件clearValidate,清除校验状态即可.

一颗大橙子c
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应 发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动添加字段名校验, 终于, 错误的原因浮现出来了 from.validateFields([n
vue elementUI 表单校验功能之数组多层嵌套
10-16
主要介绍了vue elementUI 表单校验（数组多层嵌套）功能的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Formily原来是这样解决这些表单难题
最新发布
张兴华的博客
03-08 1071
古茗在中后台的场景中大量的使用 formily 来解决问题。在首次使用 formily 时第一感受，这玩意儿咋那么难用，能不用吗？在使用表单始终会存在几个问题（表单数据管理、表单字段依赖、表单精准更新等等）。formily 仅仅作为一个帮我们去处理这类问题，不使用 formily 也照样存在你反馈的难处（但上手成本会低点🐶）。那我们来看一下 formily 是如何解决中后台表单数据管理、字段依赖、精准更新问题吧～
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
10-27
jqeury的validationEngine做ajax校验，当表单中的最后一个字段需要做ajax验证,在字段输入完毕后点击回车提交表单时不起作用，接下来为大家介绍下解决方法感兴趣的各位可以参考下哈
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
在Vant的基础上实现添加表单验证框架的方法示例
12-01
Vant 一套基于Vue的移动端UI框架，有赞出品。 因为UI设计的够漂亮，源码结构也比较清晰，插件定位也比较明确，重要是实战过程中的使用体验不错。在最近的项目当中就使用 Vant 作为移动端的基础UI框架，但在实践过程中发现该框架和其他框架有不一样的地方。例如它不内置表单验证，接下来，我把自己实现验证框架的思路分享出来。 分析需求 我们找的插件主要能解决以下问题 支持中文 适应UI框架 分组验证 动态验证（数据动态，规则动态） 去网络上搜索了一些框架，推荐两款（在官方也有推https://cn.vuejs.org/v2/cookbook/form-validation.
el-form的表单验证不生效
qq_45183027的博客
02-28 6397
之前表单验证总是返回true不生效，没注意v-if的原因，记录一下 1.原因 1）prop和model绑定的数据名称和rules名称一致; 2）表单验证ref值唯一; 3）使用v-if表单的验证失效一直返回true；在el-form-item加上key值;或者使用v-show来渲染 2.el-form部分 验证规则rules。 //form form:any ={ sponsorId: 0, } //rules验证规则 rules: any = { sponsorId: [{ required
elementUI elfrom表单验证无效、不起作用常见原因
carbonzhao的专栏
09-16 5095
的问题，我就将
vue-elementui组件-el-form表单验证失败问题
no pains,no gains
12-14 2449
待写
在 el-dialog 中使用 el-form 时，弹框关闭无法清除校验状态和校验提示信息
elewen110的专栏
05-06 3888
在 closed 中先将 form 对象重置为初始值（跟data 中的值相同），然后在 $nextTick 中使用 clearValidate 清除校验状态即可。这样做的好处（跟其他解决方式相比）是没有任何使用体验上的损失。 <el-dialog :visible.sync="dialogVisible" @closed="dialogClosed" > <el-form :model="dialogForm" :rules="rules" ref="dialogForm"&.
el-from 表单验证无效果
m0_46975894的博客
11-20 483
2、 el-form-item 中没有设置prop="tmName" 不设置props验证规则无效。1. el-form 中 ：model='tranmarkparams'
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
08-27
主要介绍了Vue使用vux-ui自定义表单验证遇到的问题及解决方法,需要的朋友可以参考下
iview form清除校验状态的实现
01-19
在iview 的官方api 中并没找到清除校验状态的方法，看了下源码，用一个粗糙的方法解决了。 源文件 form-item.vue 中的 resetField方法 是通过修改这两个属性的值清空状态和提示的 其实就是把 formItem 的两个属性值...
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
方法一： getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入...
el-form表单校验无效
monparadis的博客
05-21 3432
前言： 当表单填写完成，提交表单，使用表单验证的方法，如果验证通过保存表单，若验证不通过，则提示警告，可是validate，没有任何返回， 控制台也没有任何报错信息 产生原因：自己定义的验证方法，有种情况掉了callback返回（每个条件都需要callback返回，使validate事件进行下去） 定义解释： rule： 是自定义校验的规则 value：是被校验的数据 callback：是每一次校验之后，也就是if语句后都会返回一个callback，将结果给了validate从而继续执行代码，否
el-form自定义规则后表单验证validate不生效的问题
weixin_61570458的博客
09-21 2669
错误示范
vue 表单校验不通过问题
qq_41615095的博客
07-07 3350
vue 表单校验
el-form动态检验无法生效问题（已解决）
A_9888的博客
09-12 1194
要对el-form里面的字段动态生成校验规则，测试了一系列的骚操作也无法生效，要么是require视图生效了，校验规则还是不生效;
element-plus中的表单数据校验失效
2301_76149545的博客
11-26 1236
例如el-form上绑定的数据的data，那么el-form-item中绑定的需要是data的元素，用来指定使用哪一个元素作为校验规则，复制element-plus官网上的校验就可以使用，经过我反复对比，原来给form表单绑定数据需要写成。:model绑定自己的表单数据，:rules绑定自己的校验规则。1.el-form表单上的。给form表单简单加一个必选，和长度的校验。的所以el-form中需要写成：model。:reles绑定的数据的元素。，需要提供表单对象，所以使用。是用来绑定属性的 而。
Element el-date-picker 表单校验和数据回显问题解决方法
10-09
对于 Element UI 的 el-date-picker 表单校验和数据回显问题，可以通过以下方法解决： 1. 表单校验： - 使用表单校验规则进行验证。在 el-date-picker 上使用 `rules` 属性来设置校验规则，例如： ```html <el-form-item label="日期" prop="date"> <el-date-picker v-model="date" type="date" placeholder="选择日期" :rules="dateRules"></el-date-picker> </el-form-item> ``` ```javascript data() { return { date: '', dateRules: [ { required: true, message: '请选择日期', trigger: 'change' } ] } } ``` 2. 数据回显： - 在 el-date-picker 上使用 `v-model` 绑定一个变量，通过该变量控制日期的值。 - 在需要回显数据时，将数据赋值给绑定的变量即可实现数据回显。 以下是几个

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值