vant2 form的resetValidation失效

已于 2023-10-20 15:44:28 修改
阅读量623 收藏 2
点赞数 2
文章标签： 前端
于 2023-10-20 15:44:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25080529/article/details/133947992
版权

vant2 form的resetValidation失效

代码

this.$refs.form.resetValidation()

原因

见vant2文档[普通按钮为什么会触发表单提交]
vant文档
如果在form中使用van-button组件，并在点击事件内触发resetValidation将不会正常生效，原因是触发了submit事件，给van-button设置为native-type="button"即可解决

djdg626
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vant侧边导航栏SideBar
07-03
Vant侧边导航栏（SideBar）是Vue.js框架中Vant UI库的一个重要组件，尤其在构建响应式布局和移动应用时非常常见。Vant是滴滴出行开发的一套轻量级、高度可定制化的移动端UI组件库，它旨在提供一套简洁、易用且高效的...
Vant@2.11.2版本下载
12-11
Vant@2.11.2版本下载 Vant 是**有赞前端团队**开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一
form表单重置失效
祁梦@
03-18 657
// 重置 function reset(){ $("#form1").reset(); } // 表单reset失效解决 $(":reset").click(function(){ var resetArr = $(this).parents("form").find(":text"); for(var i=0; i<resetArr.length; i++){ resetArr.eq(...
vant动态校验表单和红色星号
我的博客
05-16 8132
待修复时，修复时间不校验 已修复时，检验修复时间并显示星号 坑： 1.上的 :required=“requiredRepairTime"只能动态控制红星，但能动态校验 2.:rules=”[ { required: faultForm.repairCompleted==‘1’ }], 写法不起作用也无法动态控制校验，必须用变量控制，并且用this.$nextTick(()=>{})更新视图 <van-field required name="repairCompleted" label=
重置表单验证 清除表单校验信息
weixin_49050598的博客
11-02 5534
重置表单验证 清除表单校验信息 提交表单验证的时间经常遇见的一个问题 再次打开时表单验证依旧存在，这种就很烦，用户体验有点差， 在使用Vant或Element UI框架时经常会遇到，再次打开表单时，原来的数据和验证信息一直保留 百度的时候，方法有很多，基本都是改js文件， 无意中看见一个超级简单的方法 Vue给了一个特殊属性 :key ，详细可以参照vue文档， Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 可以用于强制替换元素/组件而不是重复使用它。只需
vant-ui组件调用Dialog弹窗异步关闭
一键写代码的博客
05-11 1万+
需求描述： 需求描述：官方文档又是组件调用方式，又是函数调用方式。 我就需要一个很简单的：点击操作弹窗显示后，我填写一个表单，表单校验通过后，再调用API接口，返回成功后，关闭弹窗。 一个很简单的东西，element-ui用的很方便，在这里就懵比了，刚开始做的，弹窗关闭了，才返回异步接口调用的结果。网速慢点，用起来真的很不好。 正确的解决方式一： <van-dialog v-model="showDialog" title="提示" show-cance
vant 在 h5页面中引用 通过 CDN 引入
KLW75
09-03 3719
链接：https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-si.-tong-guo-cdn-yin-ru 经常这样使用，这里留作备份。 <!-- 引入样式文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css" /> <!-- 引入 Vue 和 Vant 的 JS 文件 --&gt
Vant表单验证的使用（移动端）
热门推荐
qq_33235680的博客
03-09 1万+
Vant表单验证的使用（移动端）
vant的表单校验规则
weixin_44169027的博客
12-17 9053
通过 rules 定义表单校验规则 具体代码如下 <div class="wrapper" > <div class="block" @click.stop> <div class="block-title">服务提交</div> <van-form @submit="submitForm" ref='form'> <van-field v-model="name" na
vue开发移动端使用vant组件库表单验证validator用法 按顺序校验上下项目 每个field不显示红色错误 在表单提交的时候去验证
moly_moly的博客
09-03 5786
vue开发移动端使用vant组件库表单验证validator用法 按顺序校验上下项目 每个field不显示红色错误 在表单提交的时候去验证
Wap移动端表单验证插件
10-14
Wap移动端表单验证,因环境有加密软件，所以下载后请修改index.txt为index.html、FormValidation.txt修改为FormValidation.js、jquery.txt修改为jquery.js
vant的field组件（autocomplete）
01-17
2. **实现Autocomplete功能** 要使`Field`组件具有自动完成功能，我们通常需要结合使用`Autocomplete`组件。`Autocomplete`提供了一个下拉列表，当用户在输入框中键入内容时，会显示出匹配的建议选项。在Vant中，...
vantweapp源代码
01-25
Vant WeApp是一款基于微信小程序开发的UI组件库，它为开发者提供了丰富的UI组件，用于构建优雅、高效的小程序界面。Vant WeApp源自Vant，一个由有赞公司开发的轻量级移动UI组件库，它在移动端有着广泛的应用。Vant ...
vant自定义二级菜单操作
01-18
（2）组件代码： <button @click=showM>{{ value || 选择省份 }}</button> <button @click=showC>{{ value2 || 选择城市 }}</button> <!-- 省份 --> <van-picker show-...
Vant2 清除form表单校验的操作
m0_72663698的博客
07-06 1430
在pc端使用element清除表单校验非常方便，直接调用ui框架内置的resetFields()方法就能清除校验，vant-ui里面清除校验挺含糊其辞的，在这里总结一下一个方法。1.在form表单上 加上 :key=“formKey”3.在关闭的事件里加 this.formKey ++2. 在data定义 formKey:0。
Vue vant框架form表单 validate方法
weixin_60700622的博客
11-10 1万+
通过ref可以获取到form实例并调用实例方法 在<van-form></van-form> 上面添加 ref="dataform" 可以获取到表单里的所有元素 因为我要进行表单验证所以在medthod中通过 然后在我要验证的那个<van-field></van-field> 上面添加name="xxx" this.$ref,dataform.validate("xxx")。 validate验证表单，支持传入name来验证单个或部分表单项 ...
2022-03-24 【待办Todo】day03-连接数据库
weixin_44295310的博客
03-24 2243
一、搭建云开发环境 1. 注册腾讯云账号 腾讯云开发 CloudBase 2. 创建环境实例 点击免费开通 地域：广州 计费方式：包年包月 二、连接云开发服务 1. 下载云开发服务模块包 npm install @cloudbase/js-sdk -S 2. 在 Vuex 文件（store/index.js）中引入 import cloudbase from "@cloudbase/js-sdk" const app = cloudbase.init({ env: 'your-env-id',
vant 表单验证不通过
lyxkgc的博客
10-20 1815
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
vant weapp 没有vant-form
最新发布
07-27
抱歉，我的回答有误。vant weapp 确实没有 `<van-form>` 组件。在 vant weapp 中，你可以使用 `<van-cell-group>` 和 `<van-field>` 组件来构建表单，并通过事件监听来处理表单提交。 下面是一个示例代码，演示如何使用 vant weapp 构建表单并提交数据： ```html <van-cell-group> <van-field name="username" label="用户名" placeholder="请输入用户名" bind:input="onUsernameChange" ></van-field> <van-field name="password" label="密码" placeholder="请输入密码" type="password" bind:input="onPasswordChange" ></van-field> </van-cell-group> <van-button type="primary" bind:tap="submitForm">提交</van-button> ``` ```javascript Page({ data: { username: '', password: '' }, onUsernameChange(event) { this.setData({ username: event.detail.value }); }, onPasswordChange(event) { this.setData({ password: event.detail.value }); }, submitForm() { // 获取表单数据 const { username, password } = this.data; // 在这里可以进行表单验证等操作 if (!username || !password) { // 表单验证不通过 return; } // 表单验证通过，可以将数据提交到后端进行处理 // ... } }); ``` 在这个示例中，我们使用 `<van-cell-group>` 和 `<van-field>` 组件构建了一个简单的表单。通过绑定 `bind:input` 事件监听输入框的变化，将输入的值存储在 `data` 中的对应属性中。然后，在点击提交按钮时，调用 `submitForm` 方法来获取表单数据并进行相应的处理。 希望这次的回答能够帮到你！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值