Vant2 清除form表单校验的操作

最新推荐文章于 2024-04-16 07:45:24 发布
最新推荐文章于 2024-04-16 07:45:24 发布
阅读量1.3k 收藏 3
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72663698/article/details/131577168
版权

在pc端使用element清除表单校验非常方便，直接调用ui框架内置的resetFields() 方法就能清除校验，vant-ui里面清除校验挺含糊其辞的，在这里总结一下一个方法

1.在form表单上 加上 :key=“formKey”

2. 在data定义 formKey:0

3.在关闭的事件里加 this.formKey ++

就这样就ok啦

 

 

九龙长廊_富贵呱呱
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
vue--添加商品，清空表单的注意事项
weixin_51040108的博客
10-11 388
vue--添加商品，清空表单的注意事项
微信小程序实现表单校验功能
08-29
微信小程序最难实现的公共业务是什么？应该是表单校验，这篇文章主要介绍了微信小程序如何实现表单校验功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现重置表单信息为空的方法
10-17
今天小编就为大家分享一篇vue实现重置表单信息为空的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vant2.x 进行form的多组验证提交
最新发布
JackChan
04-16 139
Vant2.x 进行form的多组验证提交
表单清空以及清空校验方法
weixin_43173924的博客
07-31 2514
this.$refs["basicInfo"].resetFields(); //basicInfo是表单定义的ref的名字
van-tab切换van-form表单时,显示前一个表单的错误校验
小迪的博客
03-21 570
bug场景描述: 利用tab切换表单时,表单校验会携带 van-tab利用v-if来控制隐藏和显示van-form表单 给每个表单添加一个:key=’’ ‘’,以此来区分form表单,从而让vue清空错误校验
vant表单验证
weixin_37863088的博客
11-15 1617
vant表单验证validator: (value) =>{true or false}
vant ui 表单验证不通过信息提示的消除
weixin_49549127的博客
07-25 6116
vant ui 表单验证不通过信息提示的消除 在使用vant表单验正消除表单不通过的信息时候可以个van-form 标签里加个 :key=”formKey” ， 我有尝试过使用:key=”+new Date()”来做这个key值，确实是可以消除不通过信息，但是又触发另一个问题，那就是我每输入一个字符就会自动帮我失去焦点 我的解决方案是在我需要的地方再修改key，代码示例： <van-form @submit="onSubmit" > <van-field v-model="usernam
重置表单验证 清除表单校验信息
weixin_49050598的博客
11-02 5462
重置表单验证 清除表单校验信息 提交表单验证的时间经常遇见的一个问题 再次打开时表单验证依旧存在，这种就很烦，用户体验有点差， 在使用Vant或Element UI框架时经常会遇到，再次打开表单时，原来的数据和验证信息一直保留 百度的时候，方法有很多，基本都是改js文件， 无意中看见一个超级简单的方法 Vue给了一个特殊属性 :key ，详细可以参照vue文档， Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 可以用于强制替换元素/组件而不是重复使用它。只需
在Vant的基础上实现添加表单验证框架的方法示例
12-01
Vant 一套基于Vue的移动端UI框架，有赞出品。 因为UI设计的够漂亮，源码结构也比较清晰，插件定位也比较明确，重要是实战过程中的使用体验不错。在最近的项目当中就使用 Vant 作为移动端的基础UI框架，但在实践过程...
vant(ZanUi)结合async-validator实现表单验证的方法
10-17
主要介绍了vant(ZanUi)结合async-validator实现表单验证的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue表单自定义校验规则介绍
10-18
今天小编就为大家分享一篇vue表单自定义校验规则介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在新增、修改等功能之前，做清除表单验证（clearValidate）操作的原因
ddx2019的博客
08-13 2687
具体描述 小伙伴问了一个问题，打开弹窗为什么要取消表单验证？ 答：是为了避免这种情况，比如你没填，点击了确定，那就打开了表单验证，此时你直接就把该弹窗关了，当你再次打开这个弹窗，这个弹窗的表单表单验证样式是存在的 this.$nextTick(val => { this.$refs["FormInAddPopup"].clearValidate(); // 取消表单验证 }) ...
清除form表单 普通html中 没有其他 ui框架
lacrimarrum的博客
05-19 845
转自https://www.cnblogs.com/ljblog/p/7735422.htmlform表单重置、清空方法记录myform 是form的id属性值1.调用reset（）方法 function fomrReset() { document.getElementById("myform").reset(); }2. 逐个清空input、select值function res...
element 修改表单值后表单验证无效_javascript自学记录：表单脚本1
weixin_39625162的博客
11-23 111
第14章 表单脚本14.1 表单的基础知识​获得表单元素：// 取得id为form_1的元素varform=document.getElementById("form_1");// 得到第一个表单元素varfirstForm=document.forms[0];// 得到名称为test的formvarmyForm=document.forms["test"];14.1.1 提交表...
this.$refs[formName].validate is not a function
m0_48390697的博客
11-01 493
this.$refs[formName].validate is not a function
vant 封装可以清空下选择器
小小笨南瓜
01-08 2854
展示效果 组件引用 <selected-picker v-model="form.famAddr3" label="省份" :columns="provinces" :columnsLength="provinces.length" placeholder="请选择" input-align="right" error-message-align="right" @onConfirm="onConfirmFam3" :error-message=
Vant2表单form内部按钮触发校验问题
qq_42969725的博客
11-16 2026
解决vant2表单form内部按钮点击事件触发校验的问题
vant 组件的表单校验
weixin_60885570的博客
10-08 9701
使用 :rules="XX" 定义校验的规则,对于手机号的校验。
vant form表单不触发校验
05-18
如果你使用的是 Vant 2.x 版本，可以尝试加上`ref`属性，然后在提交表单的时候手动触发校验，示例代码如下： ```html <template> <van-form ref="form"> <van-field v-model="name" name="name" label="用户名" placeholder="请输入用户名" :rules="nameRules"></van-field> <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码" :rules="passwordRules"></van-field> <van-button type="primary" @click="submitForm">提交</van-button> </van-form> </template> <script> export default { data() { return { name: '', password: '', nameRules: [ { required: true, message: '请输入用户名' } ], passwordRules: [ { required: true, message: '请输入密码' } ] } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 校验通过，提交表单 console.log('submit form') } else { // 校验不通过 console.log('validate failed') } }) } } } </script> ``` 如果使用的是 Vant 3.x 版本，可以使用 `validate` 方法自动触发校验，示例代码如下： ```html <template> <van-form :model="form" :rules="rules"> <van-field v-model="form.name" name="name" label="用户名" placeholder="请输入用户名"></van-field> <van-field v-model="form.password" type="password" name="password" label="密码" placeholder="请输入密码"></van-field> <van-button type="primary" @click="submitForm">提交</van-button> </van-form> </template> <script> export default { data() { return { form: { name: '', password: '' }, rules: { name: [ { required: true, message: '请输入用户名' } ], password: [ { required: true, message: '请输入密码' } ] } } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 校验通过，提交表单 console.log('submit form') } else { // 校验不通过 console.log('validate failed') } }) } } } </script> ``` 其中 `:model` 绑定表单数据，`:rules` 绑定校验规则，点击提交按钮时通过 `validate` 方法触发校验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

九龙长廊_富贵呱呱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值