<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整合Websocket,实现作为客户端接收消息的同时作为服务端向下游客户发送消息

    SpringBoot整合Websocket 1. SpringBoot作为服务端 作为服务端时,需要先导入websocket的依赖 <dependency> <groupId> ...

  2. Java服务刚启动时,一小波接口超时排查全过程

    原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,非公众号转载保留此声明. 简介 我们组有一个流量较大的Java服务,每次发代码时,服务都会有一小波接口超时,之前简单分析过,发现这些超时的 ...

  3. js: 获取Blob的值

    this.ws.onmessage = async (msg) => { console.log('从服务端获取到了数据') // 从真正服务端发送过来的原始数据时在msg中的data字段 co ...

  4. 2023牛客暑期多校训练营5 ABCDEGHI

    比赛链接 A 题解 知识点:莫队,树状数组. 区间询问显然可以离线莫队,考虑端点移动对答案的影响. 不妨先考虑右端点右移一个位置,对答案的改变.假设右端点右移后在 \(r\) ,我们先要知道 \([l ...

  5. 传输层之UDP与TCP的首部

    从通信信息处理的角度看,运输层向它上面的应用层提供通信服务,它属于面向通信部分的最高层,同时也是用户功能的最底层. 传输层位于应用层和数据链路层之间,主要有两个协议,用户数据报协议UDP(User D ...

  6. linux离线安装docker与compose

    前言 系统版本:centos 7.ubuntu 20.04 docker版本:v19.03.9.官方下载地址 docker-compose版本:v2.2.3.官方下载地址 官方提供免安装的二进制程序包 ...

  7. Python | 函数、数据容器

    1.函数 函数:是组织好的,可重复使用的,用来实现特定功能的代码段. 1.1 简单案例 重复使用计算字符串的长度 str1 = "heystar" str2 = "pyt ...

  8. CF1787E The Harmonization of XOR 题解

    CF1787E The Harmonization of XOR 题目大意 给定 \(n\) 个数 \([1, 2, 3, \cdots, n]\) 和两个正整数 \(k\) 和 \(x\). 将这些 ...

  9. 快速了解C#接口(Interface)

    Runoob 接口定义了所有类继承接口时应遵循的语法合同.接口定义了语法合同 "是什么" 部分,派生类定义了语法合同 "怎么做" 部分. 接口定义了属性.方法和 ...

  10. Unity 游戏开发、01 基础篇 | 阿发入门篇全课程学习笔记

    Unity Documentation .全课程视频 .第15,24章视频 afanihao Unity入门,全课程内容个人学习笔记,简单部分一笔带过,重点内容带 2.3 窗口布局 Unity默认窗口 ...