<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. Federated Learning001

    联邦学习--笔记001 2022.11.16周三 今天学习了联邦学习的开山之作---Communication-Efficient Learning of Deep Networks from Dec ...

  2. Typora markdown 满屏显示,去除两边的留白

    Typora 宽度在CSS样式文件中有个 max-width 值,现在的显示器分辨率比较高,会导致编辑器两边留白比较多 导致文档编辑时,高分辨率的显示器,得不到充分利用 解决方案 修改源码编辑器样式 ...

  3. python开发之远程开发工具对比

    前言 除了本地开发外,还有一种常见的开发方式就是远程开发,一般情况是一台Windows或mac笔记本作为日常使用的电脑,另有一台linux服务器作为开发服务器.开发服务器的性能往往较强,这样远程开发的 ...

  4. Istio 入门(五):访问控制和流量管理

    本教程已加入 Istio 系列:https://istio.whuanle.cn 目录 4, 流量管理 基于版本的路由配置 基于 Http header 的路由配置 故障注入 两种故障注入 比例分配流 ...

  5. .NET周刊【7月第3期 2023-07-16】

    国内文章 揭秘 .NET 中的 TimerQueue(上) https://www.cnblogs.com/eventhorizon/p/17557821.html TimerQueue 是.NET中 ...

  6. win10安装mysql时提示错误:mysqld: Can't change dir to 'C: oftware\mysql\data\' (Errcode: 2 - No such file or directory)

    win10安装解压版mysql时,提示错误: 2019-10-22 09:02:00 2004 [ERROR] Can't find messagefile 'C:\WINDOWS\system32\ ...

  7. 详解TCP网络协议栈的工作原理

    本文分享自华为云社区<网络通信的神奇之旅:解密Linux TCP网络协议栈的工作原理>,作者: Lion Long . 一.TCP网络开发API TCP,全称传输控制协议(Transmis ...

  8. 我开源了团队内部基于SpringBoot Web快速开发的API脚手架v1.6.0更新

    什么是 rest-api-spring-boot-starter rest-api-spring-boot-starter 适用于SpringBoot Web API 快速构建让开发人员快速构建统一规 ...

  9. MariaDB start 报错:mysql-bin.index' not found (Errcode: 2) (Errcode: 13)

    问题是修改配置log-bin=/data/mysql/binlog/mysql-bin后出现的. 报错:Errcode: 2 mkdir -p /data/mysql/binlog ## 和正常的DB ...

  10. 2021-8-5 Microsoft文档学习笔记(C#)

    以下列表概述了类可以包含的成员类型. 常量:与类相关联的常量值 字段:与类关联的变量 方法:类可执行的操作 属性:与读取和写入类的已命名属性相关联的操作 索引器:与将类实例编入索引(像处理数组一样)相 ...