1. <FormItem {...formItemLayout} label={'显示名'}>
  2. {getFieldDecorator('displayName', {
  3. initialValue: displayName,
  4. validateTrigger: 'onBlur',
  5. rules: [
  6. { transform: val => val && val.trim() },
  7. { required: true, message: '请输入显示名' },
  8. { max: 20, message: '显示名长度必须小于等于20字符' },
  9. {
  10. validator: (rlue, value, cb) => {
  11. if (value) {
  12. checkNickname(value).then((res) => {
  13. const { success, data } = res;
  14. // 接口成功
  15. if (success) {
  16. // 存在重名
  17. if (data.hasDisplayName) {
  18. this.props.setFields({
  19. displayName: {
  20. value: displayName,
  21. errors: [new Error('此显示名已被使用!')],
  22. },
  23. })
  24. } else {
  25. cb();
  26. }
  27. }
  28. })
  29. } else {
  30. cb();
  31. }
  32. }
  33. }
  34. ]
  35. })(
  36. <Input />
  37. )}
  38. </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. 【EF Core】主从实体关系与常见实体关系的区别

    上次老周扯了有关主.从实体的话题,本篇咱们再挖一下,主.从实体之间建立的关系,跟咱们常用的一对一.一对多这些关系之间有什么不同. 先看看咱们从学习数据库开始就特熟悉的常用关系--多对多.一对一.一对多 ...

  2. C++与Java共同点

    前言 首先我们来了解一下C++语言,大多人都C++语言是C语言基础上的改编,所以它拥有一个和C语言一样的类似结构,但是它与Java又有不可分割的关系 接下来我们来看几道题: 例如:常数O运行次数与N大 ...

  3. CoaXPress 2.0 FPGA HOST IP Core Linux Demo

    目录 Hello-FPGA CoaXPress 2.0 Host FPGA IP Core Linux Demo 4 1 说明 4 2 设备连接 7 3 VIVADO FPGA工程 7 4 调试说明 ...

  4. 关于 Task 简单梳理(C#)【并发编程系列】

    〇.前言 Task 是微软在 .Net 4.0 时代推出来的,也是微软极力推荐的一种多线程的处理方式. 在 Task 之前有一个高效多线程操作类 ThreadPool,虽然线程池相对于 Thread, ...

  5. javascript事件循环机制及面试题详解

    javascript是单线程执行的程序,也就是它只有一条主线,所有的程序都是逐行"排队"执行,在这种情况下可能存在一些问题,比如说setTimeout.ajax等待执行的时间较长, ...

  6. [python]使用faker库生成测试数据

    简介 Faker库可用于随机生成测试用的虚假数据. 可生成的数据参考底部的参考链接. 安装: python -m pip install faker 快速入门 from faker import Fa ...

  7. [kvm]cpu内存硬盘配置

    修改CPU配置 如果配置了最大CPU # 临时 virsh setvcpus test 2 # 永久 virsh setvcpus test 2 --config 热增加虚拟机的CPU数后,使用lsc ...

  8. 基于Pair-wise和CrossEncoder训练单塔模型

    本文分享自华为云社区<语义检索系统排序模块:基于ERNIE-Gram的Pair-wise和基于RocketQA的CrossEncoder训练单塔模型>,作者: 汀丶. 文本匹配任务数据每一 ...

  9. Html+JavaScript实现手写签名

    前言 Hello各位,本葡萄又来啦,今天遇到的场景是这样的:在日常业务流程中,经常需要某一流程环节中相关责任人员进行审批签字,早期许多公司为了省事就直接会把这位负责人的签名以键盘打字(楷体)的形式打印 ...

  10. 在Godot 3.X中添加触屏摇杆

    开源项目地址:https://github.com/shinneider/godot_touchJoyPad 效果图: 下载项目 方法一 直接从godot assets lib下载 如图,直接下载自动 ...