前端表单验证的坑

原创 已于 2022-02-15 15:37:13 修改 · 662 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2022-02-15 15:22:12 首次发布
本文揭示了一个常见的问题，即在Ant Design中，未将input元素正确包裹在<a-form-item>会导致表单校验不生效。简单易错的解决方案是确保每个输入字段都包含在<form-item>标签内，避免半小时的困扰。

表单校验不生效的情况

在这里插入图片描述在这里插入图片描述
解决方法：
问题：没有把 input 里的用 <a-form-item> </ a-form-item> 围起来！！
解决：用把 input 里的用 <a-form-item> </ a-form-item> 围起来！！

<a-form-item>
  //   在这写input 里的内容就可以了
</a-form-item>

这个问题很简单，但浪费了我半个小时的事件！ 恨不得记录下来~

本人很菜，但愿意学习，大佬们请不要喷~
大家一起加油吖！！！！fighting~~

前端框架的表单验证与提交
shejizuopin的博客
04-10 953
前端框架的表单验证与提交是Web开发中的关键部分。通过合理使用框架提供的工具和库，我们可以实现高效、可靠的表单验证与提交功能。React、Vue和Angular等框架都提供了丰富的解决方案，开发者可以根据项目需求选择适合的方式。同时，也需要注意表单验证与提交的性能开销，确保用户体验的流畅性。希望本文的内容能够帮助读者更好地理解和应用前端框架中的表单验证与提交技巧。
精选资源
web前端开发教程之编写简洁的页面表单验证程序
01-08
看了山人表单验证，又看了其他一些验证程序和相关的一些参考资料，写出了一个比较简洁的js表单验证程序。 功能简述： 验证： http地址 时间日期 e-mail 数字 字符长度检查 一项输入与另一项输入比较（例如：...
记录--antd-vue之form表单行内验证问题
weixin_41611635的博客
07-25 2901
记录--antd-vue之form表单行内验证问题
Ant Design Vue表单组件a-form-item-rest使用
weixin_43996999的博客
12-25 4214
Warning: [ant-design-vue: Form.Item] FormItem can only collect one field item, you haved set ACheckbox, ACheckboxGroup 2 field items. You can set not need to be collected fields into a-form-item-rest
关于表单效验的bug（this）
m0_46623754的博客
01-20 818
昨天晚上扣了一个小时硬是没找到写的表单效验哪里出了问题，晚上睡了一觉，重新审视的时候发现了问题。 一，问题js代码如下 用户名效验 // 用户名效验 function checkUsername(){ var re_str=/^\w{6,12}$/ var flag=re_str.test(this.value) if(flag){ document.getElementById("username_").innerTe
关于前端正则校验，正则表达式无效问题
m0_37506254的博客
07-29 4480
前段时间在做一些前端的js/VUE遇到的一个正则校验问题。 开始呢是这样写的，OK不废话上图： 正例： 或者VUE约可以这样写/同JSP 反例： 好了正则校验就说到这里。这也是博主亲自测试的所有代码有问题及时向我反馈哦！       ...
Ant Design Vue 表单常用点
Qpenpred的博客
07-22 1760
Ant Design Vue 表单
Warning: [ant-design-vue: Form.Item] FormItem can only collect one field item, you haved set `ASele
MoXinXueWEB的博客
02-28 1万+
小菜鸟在发现
ant-design-vue form表单自定义校验规则
LRQQHM的博客
11-03 1593
【代码】ant-design-vue form表单自定义校验规则。
js前端表单验证
01-04
本文将深入探讨JS前端表单验证的相关知识点。 首先，我们要了解表单验证的基本概念。在HTML中，表单（`<form>`）用于收集用户数据，而验证则涉及到检查这些数据是否有效。JS作为客户端脚本语言，可以在数据提交到...
前端js，jQuery表单验证插件
03-22
前端js，jQuery表单验证插件
前端表单验证的js文件
12-05
自己写的一个表单验证，特别省事，也容易操作，要是不会我还可以指导一下，这个表单是实时触发，可以调节成按钮触发，关于文件使用在我的博客里面有 地址：...
关于a-form-model-item的校验问题踩坑
qq_35478750的博客
09-19 1万+
关于a-form-model-item表单校验方式 对于vue，使用的比较多的方式为官方给出的 在整个表单外部 <a-form-model :rules="rules"> 在每个设置好prop的值，这样整个表单就能对相应的item项进行自动绑定校验 <a-form-model-item prop="ruleName"> 对于校验规则，vue2的用data（）中设置 data(){ const checkPerformanceSpec = (rule,
Ant Design Vue 使用 a-form a-form-item 进行验证。
weixin_44647098的博客
10-22 4294
<template> <div class="login"> <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }" @submit="handleSubmit0" > <a-form-item label="姓名"> <a-input place.
antd表单的＜a-form-item＞使用自定义label 插槽
热门推荐
peppa_pig的博客
07-14 1万+
item的label类型可以使字符串或者自定义label插槽。 1.直接使用字符串类型是最常见的 <a-form-model-item prop="job" label="岗位"> <a-input v-model="job" placeholder="请输入岗位" /> </a-form-model-item> 2.自定义label使用插槽 <a-form-model-item prop="job"> <span s...
Vue3实现自定义vue-json-schema-form组件
ZF的博客
01-12 4245
其中uiSchema配置的下拉框的值可以在上面自定义组件通过props.options获取。默认组件无法提供，需要自定义组件来实现复杂交互。
如何在ant design Vue中，使得两个a-form-item并排存在
DanielSmith
05-30 6495
如何在ant design Vue中，使得两个a-form-item并排存在 最近在使用ant designVue的过程中，发现两个for item无法并排存在的问题： 如下图： 因此进行了思考，其实可以采用先把两个固定在一个row里面，然后在这个row里面进行划分，划分为两个不同的col列，从而实现并排的排列方法！ 一个简单的例子如下： <a-form :form="form" @submit="handleSubmit" le>
Vue版Ant Design给a-form表单-赋值及获取表单数据-案例
JackieDYH的博客
01-19 4436
v-decorator form表单内的文本输入框，使用了v-decorate进行数据绑定 说明： v-decorate的用法，类似于v-model，但是v-decorator可以更方便的添加校验，必填项等；v-model可以更方便地获取值以及设置值，这个是二者在开发时最明显的区别 <a-form :form="form"> <a-form-item label="名称:"> <a-input placeholder="请输入名称" v-decorator
解决组件不能远程搜索的问题
最新发布
2402_88002942的博客
12-10 289
有一个组件a-select用于在下拉框中选中某个人物，在表单中提交。它的运作方式是其下拉框最初没有数据，需要用户搜索人名，后段会返回模糊搜索的系列数据。例如，前段搜索张建国，后段会返回“张建国”、“张坚果”等；搜索zjg同理；搜索“ll”，返回“bill”、“killra”等。但问题在于，前段此下拉框没有同步显示后段返回的所有数据，而是会严格显示与用户输入字段完全匹配的人名，例如搜索张建国，只显示张建国；搜索zjg则显示不出任何数据。
JavaScript实现前端表单验证技巧
在表单验证中，事件处理主要用在提交表单之前，通过监听表单的提交事件，当用户点击提交按钮时，先进行表单验证，验证通过后再提交表单。 【知识点七：表单验证的常见类型】 表单验证可以分为客户端验证和服务器端...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值