<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. ZEGO自研RTC+直播系统架构,如何支撑一场高质量直播

    近年来得益于网络基础设施的进步,实时音视频(Real-Time Communication,以下简称 RTC)和直播(采用 CDN 进行内容分发)在各行业迅速落地,在疫情的催化下更是推动传统的教育.会 ...

  2. Java扩展Nginx之五:五大handler(系列最核心)

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是<Java扩展Nginx> ...

  3. Hi3798MV200 恩兔N2 NS-1 (一): 设备介绍和刷机说明

    目录 Hi3798MV200 恩兔N2 NS-1 (一): 设备介绍和刷机说明 Hi3798MV200 恩兔N2 NS-1 (二): 制作 Ubuntu rootfs Hi3798MV200 恩兔N2 ...

  4. 【Qt6】QWidgetAction 的使用

    在开始主题前,先看一个 C++ 例子: #include <iostream> struct Data { int a; int b; }; // 注意这里 struct Data *s; ...

  5. 洛谷 P1336 最佳课题选择 题解

    P1336 最佳课题选择 题解 状态:考虑\(f_{i,j}\)表示前\(i\)种论文里面,一共写了\(j\)篇,的最少花费时间. 转移策略:我们一次考虑每一种论文写多少篇.假设写\(k\)篇,\(k ...

  6. 《Kali渗透基础》12. 无线渗透(二)

    @ 目录 1:无线协议栈 1.1:ifconfig 1.2:iwconfig 1.3:iw 1.4:iwlist 2:无线网卡配置 2.1:查看无线网卡 2.2:查看信道频率 2.3:扫描附近 AP ...

  7. 细谈商品详情API接口设计

    一.引言 随着互联网技术的发展,商品详情信息的展示和交互变得越来越重要.为了提供更好的用户体验,我们需要设计一套高效.稳定且易于扩展的商品详情API接口.本文将详细探讨商品详情API接口的设计,包括接 ...

  8. 如何调用API接口获取淘宝商品数据

    淘宝商品数据的获取是一项非常重要的技术,它可以为淘宝卖家和买家提供有利的数据分析和扩展市场的机会.调用API接口是一种快速.方便.高效的方式获取淘宝商品数据. 以下是一些步骤来调用API接口来获取淘宝 ...

  9. CCF 202012-5星际旅行(20~100分)

    前置知识 线段树:通过懒惰标记,可实现区间处理,和区间询问皆为\(O(logn)\)时间复杂度的数据结构,是一种二叉树.因此对于一个节点\(st\),其左儿子节点为\(st*2\),右节点为\(st* ...

  10. 2017-D

    2017-D 数据库部分 使用Windows 身份验证登录SQL Server ,建立数据库test0322,文件日志保存到一个专门的文件夹 建表 备份数据库,选定所创建数据库,右键-任务-备份-选择 ...