<FormItem {...formItemLayout} label={'显示名'}>
{getFieldDecorator('displayName', {
initialValue: displayName,
validateTrigger: 'onBlur',
rules: [
{ transform: val => val && val.trim() },
{ required: true, message: '请输入显示名' },
{ max: 20, message: '显示名长度必须小于等于20字符' },
{
validator: (rlue, value, cb) => {
if (value) {
checkNickname(value).then((res) => {
const { success, data } = res;
// 接口成功
if (success) {
// 存在重名
if (data.hasDisplayName) {
this.props.setFields({
displayName: {
value: displayName,
errors: [new Error('此显示名已被使用!')],
},
})
} else {
cb();
}
}
})
} else {
cb();
}
}
}
]
})(
<Input />
)}
</FormItem>

注意cb回调

form表单调接口校验 比如后台验证用户名是否存在的更多相关文章

  1. Element Ui使用技巧——Form表单的校验规则rules详细说明

    Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...

  2. 如何把整张表格的数据通过form表单的方式传回后台

    开发背景: 前段时间遇到这么一个需求,就是把一整张表格的数据存储在数据库中,之后再渲染在页面中,还可以进行重新编辑. 例如下边的课程表(为了方便,所以都是软件工程). 我也是经过一段时间的思考,才实现 ...

  3. form表单提交校验

    <form id="myForm" action="http://www.365mini.com" method="post"> ...

  4. 关于form表单或者Ajax向后台发送数据时,数据格式的探究

    最近在做一个资产管理系统项目,其中有一个部分是客户端向服务端发送采集到的数据的,服务端是Django写的,客户端需要用rrequests模块模拟发送请求 假设发送的数据是这样的: data = {'s ...

  5. js form表单的校验

    if(!$("#form").validate().form()){ return false;} <元素 class="required">< ...

  6. jQuery动态创建form表单并提交到后台(携带一定的数据进行页面跳转)

    今天遇到这么一个需求,携带一个编号一个名字跳转到另一个JSP页面,直接页面跳转(get携带数据)的话不太安全,于是想到到后台转发一下. 第一种:直接以表单提交方式的进行 JS代码: var form ...

  7. form表单提交数据给后台

    1.完整登录示例 1. form表单往后端提交数据注意三点 1.所有获取用户输入标签都应该放在form表单里面 2.action属性控制往哪儿提交,method一般都是设置成post 3.提交按钮必须 ...

  8. 从零开始学 Web 之 Ajax(四)接口文档,验证用户名唯一性案例

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. 基于form表单的极验滑动验证小案例

    01.目录展示 02.url.py urlpatterns = [ path('admin/', admin.site.urls), path('login/',views.login), path( ...

  10. JS form表单数据校验及失效情况下的解决方案

    如下图,当执行提交操作之前,我们需要对序号,要求完成时间,责任人,措施内容四项进行非空,字符长度及输入内容的类型进行校验. 直接贴样式代码 <div class="wrapper an ...

随机推荐

  1. 【Springboot】拦截器

    Springboot 拦截器 1.什么是拦截器? 拦截器可以根据 URL 对请求进行拦截,主要应用于登陆校验.权限验证.乱码解决.性能监控和异常处理等功能. 2.定义拦截器步骤 在 Spring Bo ...

  2. 关于ChatGPT与机器时代的展望

    关于 ChatGPT 与机器时代的展望 机器人这一概念,最初不是出自计算机科学家或工程师之手,而是来自于捷克的戏剧家卡雷尔·恰佩克(Karl Capek)在 1920 年编排的一出名为"罗森 ...

  3. Centos7下Oracle启动命令

    1.查询挂载历史记录 在root账户下使用一下命令 查看历史使用挂载的那个磁盘 # 查看挂载历史命令 history | grep mount # 调用挂载历史命令,主要是为了找到挂载Oracle的磁 ...

  4. (数据科学学习手札153)基于martin的高性能矢量切片地图服务构建

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,在日常研发地图类应用的场景中, ...

  5. python连接 Basler pylon相机遇到的问题

    今天使用下图程序去连接相机 以下是摄像头IP参数 电脑IP参数 在确认电脑能够ping通相机的情况下 以及检查专用软件能否访问之后 依然遇到了以下错误 经过了多番调试之后发现即使能够ping通,子网掩 ...

  6. 文心一言 VS 讯飞星火 VS chatgpt (67)-- 算法导论6.5 6题

    文心一言 VS 讯飞星火 VS chatgpt (67)-- 算法导论6.5 6题 六.在 HEAP-INCREASE-KEY 的第 5 行的交换操作中,一般需要通过三次赋值来完成.想一想如何利用IN ...

  7. Cilium系列-14-Cilium NetworkPolicy 简介

    系列文章 Cilium 系列文章 前言 今天我们进入 Cilium 安全相关主题, 介绍 Kubernetes 网络策略以及 CiliumNetworkPolicies 额外支持的内容. 网络策略(N ...

  8. win10安装mysql5.7.35教程

    前提条件:我下载的是压缩包版本5.7.35,下载地址是 https://downloads.mysql.com/archives/community/ 下载完后解压,并在如下图目录里加入data文件夹 ...

  9. .NET周刊【8月第2期 2023-08-14】

    本周由于Myuki大佬感染新冠,国际板块暂停更新一周,将在下周补齐,所以本周只有国内板块. 国内文章 解决 Blazor 中因标签换行导致的行内元素空隙问题 https://www.cnblogs.c ...

  10. 【日常踩坑】修复 chrome 打不开微信或者部分第三方应用内链接

    目录 默认浏览器为 chrome 时,打不开微信或者部分第三方应用内链接(或者没有反应) 修复问题:卸载 KGChromePlugin 参考资料 默认浏览器为 chrome 时,打不开微信或者部分第三 ...