关于Vant表单点击提交无反应的问题

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

今天用vant做了一个表单，按钮的native-type="submit"也有，但是点击了就是没反应，苦思良久，突然灵光乍现找到了原因

原因：表单里有用v-show根据情况显示和隐藏数据项，隐藏起来的数据项会因为校验不通过导致表单无法提交，比如你的手机号格式验证，格式不对会不让提交，并且默认有红色的提示，但因为你把它隐藏起来了，虽然看不到，但是验证还在

解决办法：使用v-if替代v-show

hxswk
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vant表单点击提交没有触发验证_点击提交按钮后submit事件没有被触发
weixin_39786141的博客
12-22 2658
var forms = document.querySelectorAll("form")for (var i = 0; i < forms.length; i++) {forms[i].addEventListener("submit", function (e) {console.log(this);if (!this.checkValidity()) {e.preventDefault...
vant表单点击提交没有触发验证_在Vant的基础上实现添加表单验证框架的方法示例...
weixin_39737764的博客
12-22 597
Vant 一套基于Vue的移动端UI框架，有赞出品。因为UI设计的够漂亮，源码结构也比较清晰，插件定位也比较明确，重要是实战过程中的使用体验不错。在最近的项目当中就使用 Vant 作为移动端的基础UI框架，但在实践过程中发现该框架和其他框架有不一样的地方。例如它不内置表单验证，接下来，我把自己实现验证框架的思路分享出来。分析需求我们找的插件主要能解决以下问题支持中文适应UI框架分组验证动态验证(数...
submit 按钮提交无效 点击无效果 不可用
热门推荐
jaylongli的专栏
11-21 2万+
        我的问题主要是，点击type="submit"的按钮没有作用，即是鼠标在上面点，不会发生提交，无任何响应。但是呢我先操作了一下该页面的其他按钮然后在点击该按钮又可以了。后来到网上看到一篇文章：http://blog.csdn.net/rushman/archive/2007/07/15/1693039.aspx  该文章虽然没有马上解决我的问题，但是在后面让我知道了问题所在
vant-form使用过程中遇到的小问题
weixin_44907437的博客
06-21 2689
关于vant的使用 vant-form 场景：用户登录，点击获取验证码触发了form校验
vant3中提交表单且校验不通过时滚动至错误的表单项
最新发布
W78955的博客
05-28 375
vant3中提交表单且校验不通过时滚动至错误的表单项
小程序 vant button 组件不触发 form submit 问题及解决
weixin_42369612的博客
03-09 899
小程序通知需要使用 formId 参数,使用 vant 的button 关联 submit 无法触发事件。
解决使用Vant组件库表单组件无法提交数据的问题
weixin_51828648的博客
05-25 734
的判断，但是v-show是相当于控制css属性进行的渲染，即使隐藏掉了但是组件没有销毁，还是存在的只是看不见了，所以在设置了必填的表单验证的情况下，是无法通过的，所以没有办法提交表单，点击复选框，选择毕业时间这一栏将被隐藏掉，但是点击保存，总是无法提交表单。要解决这个问题，使用v-if进行条件渲染即可。原本使用了v-show进行条件渲染。
form提交表单_利用js提交form表单的方式
weixin_39974030的博客
11-29 2607
第一种方式：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功<script type="text/javascript">function validate(obj) {if (confirm("提交表单?")) {alert(obj.value);return true;} else {alert(obj.value);return false;}}</...
vant表单点击提交没有触发验证_vant(ZanUi)结合async-validator实现表单验证的方法
weixin_39752157的博客
12-22 1908
最近在开发一个移动端商城项目，用到了有赞的 vant ，因为最近大都采用 element ui 在做PC端的东西，对比来说，vant的完成度还是偏低了点，很多细节都虽然都实现了接口，但是想使用得自己去想办法，没办法拿来即用。昨天用到 Uploader 图片上传 如是，提供了file回调，却没有提供上传功能，我必须给他加2个函数实现axios提交才能用，还有今天用到表单验证这块，它的 Field组件...
关于 vant weapp 中按钮 submit 不生效问题
李水灵的博客
09-21 2036
先放上“罪魁祸首”： 可以看得到 vant weapp 的官网明确说明 van-button 有 form-type 的属性 尝试了很多遍，原生和 van-button 的用法，始终都是原生生效，van-button 不生效，这里特指form-type不生效。 解决方法就是：使用原生 这是微信小程序官网对这个属性的解释！ PS：写进文档，老让人觉得是自己的使用方法有问题，最后结果就是这玩意根本实现不了！ ...
ajax提交form表单数据_[修复]按下回车表单被错误提交
weixin_39526185的博客
11-27 156
1、问题在文章列表页按下回车，会跳转到错误页面，如下：这是一个意料外的状况，感谢 @SummerEnds 发现问题。2、解决1）原来的设计只考虑了“开始搜索”的点击——当点击这个按钮时，会触发一段js 函数 start_search()，去收集页面表单上的数据，然后一起以ajax的方式post。而没有想到回车，竟然也会触发表单自动提交。原因是跟前端form有关：form表单中，如果当前表单只有一...
在Vant的基础上实现添加表单验证框架的方法示例
12-01
Vant 一套基于Vue的移动端UI框架，有赞出品。 因为UI设计的够漂亮，源码结构也比较清晰，插件定位也比较明确，重要是实战过程中的使用体验不错。在最近的项目当中就使用 Vant 作为移动端的基础UI框架，但在实践过程...
vant(ZanUi)结合async-validator实现表单验证的方法
10-17
主要介绍了vant(ZanUi)结合async-validator实现表单验证的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈vant组件Picker 选择器选单选问题
01-18
补充知识：vue使用vant编辑用户性别 我就废话不多说了，大家还是直接看代码吧~ 性别 value=user.gender click=isEditGenderShow> <!-- 编辑用户性别 --> <van-action-sheet v-model=isEditGenderShow :...
vue实现重置表单信息为空的方法
10-17
今天小编就为大家分享一篇vue实现重置表单信息为空的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
van-form表单中自定义点击事件不触发
weixin_43898407的博客
09-22 1463
van-form表单中自定义点击事件不触发 button 中使用native-type="button"属性去除自动 <van-form @submit="submit"> <van-button round native-type="button" @click="pre()">上一步</van-button> <van-button round native-type="submit">下一步</van-button> <
vant 表单验证不通过
MAYA_G的博客
09-14 1534
撒打发
antd的Form.Item中存在多个与运算符时，提交表单获取到的值为undefined的问题
lancun_web的博客
12-28 2349
错误的写法： <Form.Item name={name} label={label}> {type === 'input' && ( <Input style={{ width: '200px' }} placeholder={placeholder} /> )} {type === 'singleDay' && ( <DatePicker style={{ width: '200px' }} placeh
开发微信小程序使用 uview 的upload组件时，点击无反应问题记录
ltc_Yan的博客
11-01 2272
开发微信小程序时使用 uview 的upload组件时，点击无反应问题记录
vant的form表单提交
07-28
对于Vant的表单提交，你可以使用Vant提供的`van-form`组件来创建表单，并使用`van-field`组件来创建表单项。下面是一个示例代码，展示了如何使用Vant的表单组件来提交表单数据： ```html <template> <van-form @submit="onSubmit"> <van-field v-model="formData.username" label="用户名" placeholder="请输入用户名"></van-field> <van-field v-model="formData.password" label="密码" type="password" placeholder="请输入密码"></van-field> <van-button type="primary" native-type="submit">提交</van-button> </van-form> </template> <script> export default { data() { return { formData: { username: '', password: '' } }; }, methods: { onSubmit() { // 在这里可以处理表单提交的逻辑 console.log(this.formData); // 发起请求或其他操作... } } }; </script> ``` 在上面的示例中，`van-form`组件包裹了两个`van-field`组件，分别用于输入用户名和密码。当用户点击提交按钮时，`@submit`事件会触发`onSubmit`方法，你可以在该方法中处理表单提交的逻辑，比如向服务器发送请求或进行其他操作。 注意，上述示例代码只是简单的演示了Vant表单提交的基本用法，实际情况中你可能还需要进行表单验证等额外的处理。你可以根据自己的需求对表单进行进一步的扩展和定制。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值