vant2.10.0以下版本的表单验证规则rules报错后无法重置表单状态的问题

最新推荐文章于 2024-05-24 16:54:57 发布
最新推荐文章于 2024-05-24 16:54:57 发布
阅读量3.8k 收藏
点赞数 1
分类专栏： vant 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43650979/article/details/107969093
版权

问题描述

使用vant的vant-field组件来实现输入框，此项为必填项，所以需要加:rules="[{required: true }]"

<van-field
      v-model="companyID"
        type="text"
        name="companyID"
最低0.47元/天 解锁文章
H_x
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue实现重置表单信息为空的方法
10-17
今天小编就为大家分享一篇vue实现重置表单信息为空的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在Vant的基础上实现添加表单验证框架的方法示例
10-17
然而，Vant 并未内置表单验证功能，这在实际项目中可能成为一个短板。本文将介绍如何在 Vant 基础上集成表单验证框架，以满足项目需求。 首先，我们需要分析表单验证的需求。理想的验证框架应该具备以下几点： 1. ...
表单提交后重置参数
weixin_43880497的博客
09-25 603
表单提交后重置参数: this.form = this.$options.data().form;
Vant 提交不触发校验非必填内容
m0_66300374的博客
05-24 219
代码 ：在rules 加 validateEmpty: false。需求：比如车牌号属于非必填项，点击提交会触发校验空值的情况。
重置表单验证 清除表单校验信息
weixin_49050598的博客
11-02 5578
重置表单验证 清除表单校验信息 提交表单验证的时间经常遇见的一个问题 再次打开时表单验证依旧存在，这种就很烦，用户体验有点差， 在使用Vant或Element UI框架时经常会遇到，再次打开表单时，原来的数据和验证信息一直保留 百度的时候，方法有很多，基本都是改js文件， 无意中看见一个超级简单的方法 Vue给了一个特殊属性 :key ，详细可以参照vue文档， Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 可以用于强制替换元素/组件而不是重复使用它。只需
vant 表单验证不通过
lyxkgc的博客
10-20 1827
vant ui 表单验证不通过信息提示的消除。 像element ui form模块， 表单验证重置，有个reset方法，vant ui中，没有。 所以，只能使用偏方了。 利用vue的 dom渲染原理。 // html <van-form @submit="onSubmit" :key="formKey" class="purchase-wrap"> ... </van-form> <script> data () { return { formKe
VUE表单校验rules不起作用
热门推荐
卡农的魔笛
02-29 1万+
在做公安局疫情上报系统的时候，由于前台的表单项目比较多，而且需要根据不同的条件进行显示切换，开始运行是表单校验很好用，随着项目不断更新，忽然有一天发现校验不起作用了。 经过几次调试，发现一个规律，就只有2项是不好用的，而且就是2，3项目不起作用，把表单换一下位置，只要是处在第二，第三项目上，就不行。比如第二项之前是身份证，把身份证提到第一项上，姓名为第二项，那么姓名的校验就不好用。 经过1个多小时...
vant(ZanUi)结合async-validator实现表单验证的方法
10-17
主要介绍了vant(ZanUi)结合async-validator实现表单验证的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
为解决这个问题，可以在提交表单成功后，直接将表单绑定的数据重置为初始状态： ```javascript resetForm() { return { remark: '', name: '' }; } submit() { // 调用成功处理... let self = this; let ...
解决 Vant 框架的 Field 组件 rules 规则错误提示语不动态改变
忘忧
04-26 721
Vant 的 Field 组件通过 rules 属性来设置验证表单的动态错误提示语
微信小程序搭配vantweapp使用表单中Field输入框替换原始input输入框，reset重置按钮失效或失败
qq_44776950的博客
08-01 4003
微信小程序文档中form表单原来有重置事件 button按钮的reset只对表单中的input有效，于是点击重置按钮重置失败，所以将表单绑定bindreset事件来重置表单 解决方案： wxml代码： <form bindsubmit="addbtnSub" bindreset="delbtnre"> <!-- <input name="barcode" placeholder="请输入条形码" value="6913825649859"></input>
在vue3+ts的项目中，如何解决vant组件自带表单校验不生效?
i-cat的博客
02-22 2595
vant组件自带表单校验不生效，原因竟是没加name属性！！！
【移动端：rules 规则校验不生效】
会者定离，一期一祈
07-13 1293
今天遇到一个BUG，虽然在vue页面里加了规则校验，但是并没有生效。经过排查后发现，在form表单中要增加prop属性。如下图 只有加了这个属性，校验规则才会生效
van-form无法校验表单必输项
tan_xiao_tan的博客
03-07 586
【代码】van-form无法校验表单必输项。
vant2表单组件Field在iOS上校验出错
Liu
09-08 1454
在安卓手机上可以正常校验，但iOS系统无论输入几个字符都会提示错误，原因可能是iOS输入法会输入特殊字符。需要校验用户的输入，长度超出进行错误提示，所以使用了正则表达式进行校验，代码如下。
Vue rules表单验证失效
weixin_43643765的博客
11-06 4926
这个题目可能表达不明白，就是表达内的数据都填写了通过rules验证发现表单内根本没有数据，表单是空的。 这是表单 类型是insertBook，填写基本的图书信息 <el-form :rules="rules" ref="insertBook" :model="insertBook" label-width="80px" > <el-row> <el-col :span="7"
vantUI表单校验失败，如何跳到 校验失败的第一项？并且不被导航遮挡。antd框架有自带的api
ju_vlog的博客
04-20 353
// dom为校验失败的那一项的元素 if (dom) { dom.scrollIntoView(false, { behavior: "smooth", block: "center", inline: "nearest" }); dom.focus() }
vue element ui表单验证不通过，滚动到页面上第一个验证失败的输入框位置
HeMister的博客
04-17 2770
this.$refs['refName'].validate((valid, object) => { if (valid) { // valid Boolean true||false // 正常处理 } else { this.scrollView(object) } }) // 滚动到固定地方 scrollView(object) { for (const i ...
element form表单验证 页面回到第一个验证错误的位置
tq1711的博客
12-24 1108
formErrorScroll () { // 报错回到第一个错误的地方 if (document.querySelector(’.el-form-item__error’)) { document .querySelector(’.el-form-item__error’) .parentNode.scrollIntoView({ block: ‘start’, behavior: ‘smooth’ }) } }
vant :rules="rules" 提交表单验证
最新发布
06-06
vant是一款基于Vue.js的轻量级移动端UI组件库，它提供了丰富的组件和样式，可以帮助开发者快速构建高质量的移动端应用。其中，vant中表单组件提供了表单验证功能。 在vant中，可以通过设置rules属性来实现表单验证。这个属性是一个对象，其中每个键对应一个表单项的名称，值为一个数组，表示该表单项的验证规则。例如： ``` data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' } ] } }; } ``` 在上面的例子中，form对象中包含了两个表单项：username和password。而rules对象中，分别对这两个表单项设置了不同的验证规则，包括必填、长度限制等等。 除此之外，在提交表单时，还需要在form对象上调用validate方法进行整体验证。例如： ``` submitForm() { this.$refs.form.validate((valid) => { if (valid) { alert('提交成功'); } else { alert('表单验证失败'); return false; } }); } ``` 上述代码中，$refs.form指向表单组件的ref属性，validate方法会对整个表单进行验证，并通过回调函数返回验证结果。如果验证成功，则可以进行表单提交操作，否则提示用户表单验证失败。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值