Antd输入框失去焦点后请求接口根据返回值校验

最新推荐文章于 2023-10-25 09:49:46 发布
最新推荐文章于 2023-10-25 09:49:46 发布
阅读量2.2k 收藏 1
点赞数 1
分类专栏： React 文章标签： Input 校验 callback
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huanhuan03/article/details/114290672
版权

标题可能描述的不是很清楚，意思是：我的输入框在失去焦点的时候，既要校验非空和特殊字符，还要请求接口根据返回值校验是否通过：
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
就校验这些：
在这里插入图片描述

在这里插入图片描述

至此已经可以成功校验了，但是控制台会报一句错，虽然它不影响校验：

在这里插入图片描述
都知道是callback已经弃用了，但是在接口里面不能return Promise.reject()或者resove，所以只能将callbanck传入使用。

路过大神求指教~

慢半拍、
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何实现在使用element-ui中table的组件时可以实现编辑和增删改查功能（1.使用失去焦点事件，调用后端接口进行input框的查重。2.使用element UI 的row-click）
ZHANGJIN9546的博客
01-02 1009
element前端ui组件挺美观的，我们也使用了他们的table组件，但是默认没有提供行编辑功能，我们可以通过将table的每个单元格换成input框来巧妙实现。默认每个单元格就是一个template数据填充，不可编辑；我们可以在template里面包裹一个input框来实现单元格可编辑；等每一个单元格都可编辑的时候，我们可以在每一行后面加一个按钮来控制只可编辑当前行。 先来看一下原始不可编辑的写...
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from....
表格中的input修改调用接口
weixin_58482632的博客
10-25 60
表格中的input 修改 失去焦点时 调用接口修改，但是用户操作就修改完直接点下一个input 导致 ：focus清空内容不会又会被重新赋值 具体的底层不太懂。解决方式就是把获取焦点的方法改成点击时候就会先调用完接口再点击了之后清空。把focus改为click 表格绑定的值就不会因为调用先获取焦点再赋值了。
ant design of vue v-decorator失焦时校验
m0_46550764的博客
05-06 1190
校验手机号 本文以校验手机号为例 1、标签使用失焦事件 <a-input v-decorator="['reporterTel']" :disabled="disabled" @blur="validatePhoneBlur" /> 2、通过对e.target.value校验后，生成错误信息 validatePho
前端失去焦点发起请求
啊猿的博客
03-20 1265
@RequestMapping("/a1") public void a1(String name, HttpServletResponse response) throws IOException { System.out.println("name"+name); if("yyy".equals(name)){ response.getWriter().print("true"); }else { ...
Ant Design Mobile Form.Item 自定义组件，失去焦点的时候如何操作
weixin_43814775的博客
04-28 888
Ant Design Mobile Form.Item 自定义组件，失去焦点的时候如何操作
antd vue form 手动校验_elementui 中自定义组件如何触发校验
weixin_39839478的博客
11-30 2217
本文用到的 element-ui 版本为 2.14.0，vue版本为 2.6.11。背景自定义开发组件，比如一个输入组件，在 el-form-item 中使用，失去焦点没法触发校验。虽然调用 validate 方法不会校验通过，但是没有像官方组件一样，输入后，校验提示应该自动消失。解决方案自定义组件可以在失去焦点后，主动去调用 el-form 提供的 validate 方法，校验单个字段...
【JavaScript源代码】react+antd.3x实现ip输入框.docx
12-29
根据按键码判断光标的移动方向，并通过`focus()`方法将焦点切换到相应的输入框。 5. **CSS样式**： - `styles`导入了`index.less`文件，这可能包含自定义的CSS样式，用于调整输入框的布局和视觉效果。例如，`input...
antd-input-tag.zip
06-25
在React开发中，Ant Design（简称Antd）是一个广受欢迎的UI组件库，它提供了大量预设的、符合 Material Design 规范的组件，极大地方便了开发者构建用户界面。"antd-input-tag"是一个Antd中的组件，专门用于将用户在...
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
方法一： getFieldDecorator没有第三个参数，如果写了3个参数就会出错 错误代码： <Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ ...Input placeholder='\u8bf7\u8f93\u...
使用TextRange获取输入框中光标的位置的代码
10-31
其中后者又有可以衍生出很多更有用的用途，比如：限制输入的MaskTextBox，其核心技术点就是获取输入框的光标位置，然后使用正则表达式判断输入内容。还有我后面会介绍的"使用方向键在输入框矩阵中自然的导航"，核心...
基于React、Antd和Flask做的前后端分离的图书管理系统.zip
最新发布
07-15
2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； ...
将光标定位于输入框最右侧实现代码
12-08
此外，如果输入框的值是动态变化的，可能需要在每次值改变后重新调用这些步骤，以保持光标在正确的位置。 总的来说，将光标定位到输入框最右侧是一种常见的前端交互需求，通过结合使用`focus`方法和对输入框值的...
antd table按表格里的日期去排序操作
01-18
根据票据日期升序（这里是已经排序后的效果） 上代码 代码中data的内容如下 根据paper_date排序，因为目前这种格式不支持比较，需要先转换成时间戳 new Date(aTimeString).getTime() 之后再用装换后的时间戳去...
解决antd的Form组件setFieldsValue的警告问题
01-21
解决antd的Form组件setFieldsValue的警告 使用antd的Form组件setFieldsValue可能会出现You cannot set a form field before rendering a field associated with the value.警告，字面意义去看是说在 render之前设置...
android表单失去焦点校验,Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)...
weixin_42350314的博客
05-31 655
AngularJS提供了表单验证，但是验证的过程交互体验很不好，比如重设密码，重复密码的时候一键入就会提示密码不正确，现整理了两种方法，仅供借鉴。一，点击提交验证密码重复密码密码不一致确认取消当用户试图提交表单时，你可以在作用域中捕获到一个submitted值，然后对表单内容进行验证并显示错误信息。JS代码$scope.submitted = false;$scope.resetPwd = fun...
antd的form表单自定义验证validator的注意事项
热门推荐
Lofan 的博客
02-04 2万+
validator 这个验证在if-else里，每个判断情况都要加callback，不然会导致所有rule验证失效，页面上没填都不提示。 比如这样： <Form.Item label="模式"> {getFieldDecorator("p_mode", { rules: [ { required: true, message: "请选...
Ant Design VUE表单校验之自定义服务端校验
aa245455945的博客
08-25 1026
引言 本文章涉及的代码块，为实际代码中的截取部分，请各位结合自己的实际情况修改 开始 这里我的校验需求是编号不可重复，如果重复需要抛出校验信息 表单结构部分 根据Ant Design VUE的文档定义好需要的字段 <a-modal :visible="visible" title="项目定义信息" :width="800"> <a-form-model ref="project" :rules="rules" :label-col="{ span: 6 }" :wrappe
antd form表单验证自定义验证validator根据后台接口判断验证
一个学vue用vue的前端大白,休闲听音乐，https://unpkg.com/v3demo/index.html
03-22 1482
有时候表单中的某些字段是需要调用后台接口验证,比如账号,ID之类的.这时候页面需要根据后台返回结果提示。
antd input失去焦点事件
08-11
引用引用引用和引用的内容，antd的Input组件在输入过程中会出现失去焦点事件的问题。解决这个问题的一种方法是避免在输入过程中触发render，可以在输入结束后手动点击按钮或者等待组件失去焦点。另外，根据引用，如果在使用Table组件的时候将columns中的某个key命名为"key"，可能会导致Input组件失去焦点的问题。解决办法是将key修改为其他名称，以避免与diff算法发生冲突。因此，可以结合以上方法来解决antd Input失去焦点事件的问题。123 #### 引用[.reference_title] - *1* *3* [解决antd+react的Input组件每次输入都失去焦点](https://blog.csdn.net/ZxqSoftWare/article/details/106217091)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [react antd table中的Input每次输入都失去焦点 另一种导致问题的原因](https://blog.csdn.net/chirpmonster/article/details/121770808)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值