antd validator ajax,ant-design组件库form表单如何进行异步校验

最新推荐文章于 2021-09-24 16:56:37 发布
最新推荐文章于 2021-09-24 16:56:37 发布
阅读量689 收藏
点赞数
文章标签： antd validator ajax

问题描述

ant-design组件库form表单如何进行异步校验

问题出现的环境背景及自己尝试过哪些方法

我用的是redux，内部没有维护state，我用的是onvalueschange，mapPropsToFields那一套东西，之后，我现在想把一个shopid在输入完blur之后发起ajax请求，然后等待返回值回来的时候去触发callback(new Error(''))显示红字的这种，我用了promise去return一个值(也用了async，await)回来进行判断然后输出callback，但是callback上面和下面的console都能打出来，唯独这个callback显示不在页面，还有就是我其他的表单项，当我点击提交，总体校验的时候，也不显示那些callback的提示红字

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

你期待的结果是什么？实际看到的错误信息又是什么？

我希望能够进行校验(异步同步都要)，自从我用了onvalueschange，mapPropsToFields之后，校验就不好使了

薄荷味糖豆
关注
2021-05-06 antd中的Form表单异步验证
zewen_li的博客
05-06 2448
antd中的Form表单异步验证： <Form.Item rules:[ { // 普通验证 required:true, message:'该字段是必须的' }, { // 自定义验证 rule是规则对象，包含字段名称，以及字段类型校验器等等，val为输入框内容 validator函数接收promise作为返回
AntDesign 表单异步校验
keloneko的博客
02-22 3720
AntDesign 表单异步校验
async-validator:验证表单异步
05-10
异步验证器 验证表单异步。 的变体 安装 npm i async-validator 用法 基本用法包括定义描述符，将其分配给架构，将要验证的对象以及回调函数传递给架构的validate方法： import Schema from 'async-validator' ; const descriptor = { name : { type : 'string' , required : true , validator : ( rule , value ) => value === 'muji' , } , age : { type : 'number' , asyncValidator : ( rule , value ) => { return new Promise ( ( resolve , reject ) =>
leetcode：1615.最大网络秩
OceanStar的博客
10-29 1265
【代码】leetcode：1615.最大网络秩。
React中Antd表单提交验证4.x版本---自定义 validator 没有效果的解决方法
weixin_51364974的博客
09-24 2013
声明式写法 rules={[ { required: true, message: '用户名不能为空' }, { min: 4, message: '用户名至少4位' }, { max: 12, message: '用户名至多12位' }, { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名必须需是英文，数字或下划线组成' }, ]} 自定义validator写法 validatePwd = async (rule, v
create-nuxt-antd:使用ant-design的nuxt项目
05-15
使用ant-design的nuxt项目 构建设置 # install dependencies $ yarn install # serve with hot reload at localhost:3000 $ yarn run dev # build for production and launch server $ yarn run build $ yarn start...
wangeditor-antd:基于ant-design风格重构的wangeditor富文本编辑器
05-01
基于ant-design风格重构的wangeditor富文本编辑器,主要趋于样式重构，javascript部分未修改。 更新日志 计划跟新适配Vue3 风格统一为 ant-design-vue 2.0风格 修改部分说明 重构图标 重构下拉样式 重构input输入框 ...
基于vue Ant-Design 的表单设计器.zip
12-26
这个工具结合了Vue.js的响应式特性和Ant Design的优美UI组件库，为开发人员提供了一种高效、灵活的表单设计解决方案。 Vue.js是一个轻量级的前端JavaScript框架，以其简洁的API和易于上手的特点深受开发者喜爱。它...
ant-design-vue-4.0.7.zip
最新发布
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
基于 vxe-table 表格的适配插件，用于兼容 ant-design-vue 组件库
05-28
npm install vxe-table@next vxe-table-plugin-antd@next ant-design-vue@next // ... import VXETable from 'vxe-table' import VXETablePluginAntd from 'vxe-table-plugin-antd' import 'vxe-table-plugin-antd/...
异步表单验证
01-02
灵活好用的jq表单验证，自己封装可按照验证需求添加验证方法，不需要修改验证整体结构，内含使用说明。 var arr = new Array(); /* */ //用户验证 arr[0] = new XQValidation(); arr[0].XChecksetcont("3-12长度，字母，数字，下划线", "", "表单不能为空", "验证失败", "此用户已存在", "此用户可以注册"); arr[0].posturl("/FormValidation/ajax/ajax-validation.asmx/user_isNull", "name"); arr[0].check("tname", "td1", "checkusername", true, true); //密码验证 arr[1] = new XQValidation(); arr[1].XChecksetcont("6-20长度，字母，数字，和其他符号", "ok", "表单不能为空", "wrong", "表单不能为空"); arr[1].check("tpass", "td2", "checkpassword", true, false); //邮箱验证 arr[2] = new XQValidation(); arr[2].XChecksetcont("正确邮箱", "ok", "表单不能为空", "wrong"); arr[2].check("tmail", "td3", "checkemail", true, false); //联系方式验证 arr[3] = new XQValidation(); arr[3].XChecksetcont("正确手机,非必须", "ok", "表单不能为空", "wrong"); arr[3].check("tmobile", "td4", "checkcontactway", true, false); //QQ验证 arr[4] = new XQValidation(); arr[4].XChecksetcont("qq,非必须", "ok", "表单不能为空", "wrong"); arr[4].check("tqq", "td5", "checkqq", false, false); //验证码验证 arr[5] = new XQValidation(); arr[5].XChecksetcont("", "ok", "表单不能为空", "wrong"); arr[5].check("tcode", "td6", "checknull", true, false); //重复密码验证 arr[6] = new XQValidation(); arr[6].XChecksetcont("", "", "表单不能为空", "密码不匹配"); arr[6].check("tapass", "td7", "checkpassword_", true, false); /* *summary：提交表单验证 */ function formok() { for (var i = 0; i < arr.length; i++) {//循环遍历验证对象 if (!arr[i].getstate()) { arr[i].alertwrong(); return false } } //判断两次输入的密码是否一样 if (!chkapass($("tapass").value)) { arr[6].alertwrong(); return false; } return true; }
antd form validator自定义校验规则
无缺的博客
11-13 7237
需求：如果输入为空：提示不可为空，如果输入字段里有x字符串，提示不可带x，根据不同的情况提示不同的错误信息。 效果图如下： 代码如下： import React, {Component} from 'react'; import {Button, Modal, Form, Input} from 'antd'; import styles from './index.less'; const FormItem = Form.Item; const validateLimit = (rul
Antd Design Form表单检验
weixin_43865681的博客
09-01 671
第一种常规用法 <Form.Item name={dataIndex} style={{ margin: 0, }} rules={[ { required: must, message: ` ${title}不能为空!`, }, ]}
antd design（4.x）中的Form
小怪兽
04-21 4637
1.初始化表单数据 initialValues：表单默认值，只有初始化以及重置时生效。 代码示例如下： <Form layout="horizontal" form={form} initialValues={{ RealName: userInfo.RealName, Sex: userInfo.Sex, Mobile: us...
validate异步验证
u010050904的专栏
05-06 1007
remote:{url:"manage/middleDisplayeckSortOrder.do",type:"post",cache:false,dataType:"json",data:{sortOrder:function(){return $("#sortOrder").val();},position:function(){return $("#position").val();}}}}
antd4表单验证和自定义验证
reg183的专栏
03-18 1240
代码如下： <Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名!' }, // { min: 4, message: '用户名至少4位!' },
ant4 多个form 验证_AntDesign Form表单字段校验的三种方式
weixin_42164534的博客
02-06 1744
1.使用getFieldDecorator的rules规则最简单的方法就是使用getFieldDecorator中的rules验证。rules中定义校验规则，message为校验不通过时的提示文字。{getFieldDecorator(‘inputContent‘, {rules: [{required:true,message:‘请输入内容!‘,}],})()}rules校验规则参数说明类型默认...
企业级UI设计语言：ant-design组件库及其实用特性
资源摘要信息: "ant-design-4.20.2.zip 是包含了企业级 UI 设计语言和 React 组件库的压缩包文件，其组件库名为 ant-design，简称 antd。该库提供了一套经过提炼的企业级中后台产品的交互语言和视觉风格，用户可以开...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值