表单校验踩坑 （关于Button组件的默认值）

最新推荐文章于 2022-10-18 10:42:40 发布
最新推荐文章于 2022-10-18 10:42:40 发布
阅读量280 收藏
点赞数
分类专栏： bug及优化 文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48092226/article/details/124746393
版权

背景：在表单内中，点击上传文件，会触发表单内的其他的校验

需求：上传时不需要触发其他校验

使用技术栈：

表单：使用tea-component的表单

校验表单组件：使用react-hook-form

复现

当前代码中的处理

解决

方法一：改成其他标签

方法二：Button原始类型改成button

分析

没有改成其他类型的Button会触发表单的校验默认是submit

 

 总结：熟读并背诵文档

站在28楼听风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd 表单提交，文件和表单内容一起提交，表单校验
a_靖的博客
12-19 7421
用很简单的源码实现包含下列 antd 表单相关知识： 1.表单必填校验，规则校验 2.Upload 上传图片，获取上传图片的状态，如上传成功，上传失败，上传进度条，删除上传的文件 3.获取 Input 组件用户输入的值，设置默认值 4.提交表单不刷新页面 5.把上传的图片显示在页面 页面效果图： 提交前 提交后：包括校验失败的场景 t_form.jsx 代码： ...
Django forms表单校验
lyp_CSDN的博客
01-15 499
1、先导入forms模块 from django import forms 2、创建模板的类 1、创建模板 class loginform(forms.Form): # 2、模板中的元素 name = forms.CharField(min_length=6,error_messages={"requird":"用户名不能为空","min_length":"最小长度为6"}) ...
html 按钮默认值,button_标签 | Elements_HTML_参考手册_非常教程
weixin_31064353的博客
07-11 1128
buttonHTML元素表示一个可点击的按钮。能够在表单，或者 HTML 文档的任一需要按钮的位置。默认情况下 HTML 按钮会呈现与用户主机相似的样式，基于user agent。内容类别流内容，措辞内容，交互内容，列出，可引用和可提交的表单相关的内容。允许的内容短语内容。标记遗漏没有，起始和结束标签都是强制性的。允许父母任何接受短语内容的元素。允许ARIA角色复选框，链接，menuitem，me...
[html] button标签的type默认值是什么呢？
歌谣的博客
03-23 806
[html] button标签的type默认值是什么呢？ Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
【前端】关于button 的Type默认值
weixin_30914981的博客
08-05 319
在用struts2做ajax 的时候，用一个button标签来触发ajax，碰巧的是button刚好在form里，所以每次都刷新页面； 一开始以为是后台的问题，重新写了一个demo，确定后台没问题 之后以为是用模板用的模板的问题，把button移出了form表单，发现页面不再刷新；　 最后在W3C查了button，官方的解释是： 　　Internet Explorer 的...
button 按钮 触发表单校验
qq_39087348的博客
08-18 1304
加 type=“button” 即可
vue（element）、uniapp常用的几种表单校验
Change!
10-22 3642
这里采用element中的rules，也可以通过手动判断实现 1.输入框/下拉选不能为空 name:[{ required: true, message: '不能为空',trigger: 'blur' }], sex:[{ required: true, message: '不能为空',trigger: 'change' }], 2.手机号： phone:[ { required: true, message: '不能为空',trigger: 'blur' }, { pattern: "^[1][
form必填默认校验_Ant Design Mobile的表单校验方案
weixin_39839541的博客
11-22 1030
安装npm i ant-design-mobile-form场景表单怎么做校验才优雅呢？在 PC 端，一个做的比较知名的方案是 Ant Design 的表单组件。它可以通过简单的 rule 配置，来实现“必填”，“自定义错误提示”，甚至自定义规则校验。 Ant Design 官网：https://3x.ant.design/components/form-cn/然而在移动端，似乎从没一个组件库，做...
jQuery formValidator 表单校验插件 4.1.0
05-01
jQuery formValidator表单校验插件 4.1.0 升级内容： 新增以下功能： 1、新增换肤功能，包括提示层的样式、输入控件(目前只支持text、password、file、textarea)的样式。initConfig增加theme属性，表示皮肤名，...
Django内置Form表单和Validators校验组件
chuzhong1074的博客
08-12 2970
Form组件介绍 form组件的主要功能如下: 生成页面可用的HTML标签 对用户提交的数据进行校验 保留上次输入内容 使用form组件实现注册功能的例子 先定义好一个RegForm类 from django import forms # 按照Django form组件的要求自己写一...
tencent-component-toolkit:腾讯组件工具包
03-05
腾讯组件工具包 腾讯组件工具包。 用法 $ npm install tencent-component-toolkit --save 发展 所有git commit消息必须遵循以下语法： type(scope ? ): subject # scope is optional 支持类型： 壮举：添加新功能 修复：修复错误或补丁功能 ci ：CI 琐事：修改配置，与生产代码无关 docs ：创建或修改文档 重构：重构项目 还原：还原 测试：测试 大多数时候，我们只使用feat和fix 。 测试 对于一些环境变量运行集成测试，我们应该建立.env.test本地或secrets的CI。 只需将.env.example复制到.env.test ，然后更改为测试帐户。 执照 版权所有（c）2019年至今的腾讯云公司。
表单验证系列（一）：Table主页
weixin_46030044的博客
06-21 206
技术栈：umi、React、ts、tea-component 搭建基础父级页面 import React, { useRef, useState, Fragment } from 'react'; import { useHistory } from 'react-router-dom'; import { Layout, Card, Button, SearchBox, Table, Justify, } from 'tea-component'; const { Conte
python tkinter button_Python窗口Tkinter Button详解与位置调整
weixin_39556064的博客
11-24 2144
通过下面的代码快速熟悉Button的参数和Place()函数#!/usr/bin/python#-*-coding:utf-8 -*-from tkinter import messageboximport tkinter as tktop = tk.Tk()#这里四个参数分别为：宽、高、左、上top.geometry("500x300+750+200")top.title("www.tianqi...
单选按钮设置默认值
xiaofanren1111的博客
05-11 4372
其中prop是重点，使用attr不行。 $(":radio[name='rbsex'][value='" + sex + "']").prop("checked", "checked");
Tkinter 组件详解（二）：Button
热门推荐
来自江南的你的博客
12-19 3万+
Tkinter 组件详解之Button 简介 Button（按钮）组件用于实现各种各样的按钮。Button 组件可以包含文本或图像，你可以将一个 Python 的函数或方法与之相关联，当按钮被按下时，对应的函数或方法将被自动执行。 Button 组件仅能显示单一字体的文本，但文本可以跨越多行。另外，还可以为其中的个别字符加上下划线（例如用于表示键盘快捷键）。默认情况下，tab 按键被用于在按...
Ant-Design 官方网站总是打不开，那么我们则需要使用以下该官网的镜像地址来打开；
最新发布
weixin_66709443的博客
10-18 1万+
Ant-Design 官网镜像地址
jquery validation 在触发按钮单击事件进行表单校验和验证通过后发起ajax请求的解决方案
pandajc的博客
10-23 1万+
//声明一个函数 function validform() { return $("#form-article-add").validate({ rules : { title : { required : true, minlength : 5, maxlength : 50 }, sellpoint : { required : true
Vue.js+ElementUI子组件表单拆分与校验实践
"ElementUI多个子组件表单的校验管理实现" ElementUI是一个基于Vue.js的组件库，它提供了一系列美观的UI组件，其中包括表单元素。在处理复杂的业务场景时，尤其是在大表单中，往往需要将表单拆分为多个子组件，以便...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值