ant-design-pro 自定义表单 rules规则
表单输入
<ProFormText
name="id"
label={intl.formatMessage({ id: 'pages.secret.form.id' })}
width="sm"
rules={[{ validator: checkKeyword }]}
/>
自定义校验
// 自定义关键字规则
const checkKeyword = (rule: any, value: any, callback: any) => {
if (!value) {
callback("内容不能为空!");
} else if (value === "1") {
callback("内容不能为1,请您检查!");
}
// callback();
// warning: `callback` is deprecated. Please return a promise instead.
return Promise.resolve();
};
在表单中校验
<ProFormTextArea
name="apiKey"
label="apiKey"
width="xl"
placeholder={intl.formatMessage({ id: 'pages.secret.form.apiKey.placeholder' })}
rules={[
() => ({
validator(_, value) {
if (!value) {
return Promise.reject(new Error("这里不能为空"));
}
if (value instanceof Object) {
return Promise.reject(new Error("请输入正确数据格式"));
}
return Promise.resolve();
},
required: true,
}),
]}
/>
ant-design-pro 自定义表单 rules规则的更多相关文章
- jquery.validate.js使用之自定义表单验证规则
jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...
- Element-ui中自定义表单校验规则
先看一个场景图: 给一个标签el-tag添加表单的校验,且在内容有了以后关闭校验 看代码: <el-form-item class="baseinfo-tags" label ...
- 文档驱动 —— 表单组件(五):基于Ant Design Vue 的表单控件的demo,再也不需要写代码了。
源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...
- jquery.validate.js之自定义表单验证规则
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- Django 表单校验 表单字段设置 自定义表单校验规则
今天看到了一篇非常好的博文,拿来和大家分享一下. 内容包括了: 用户注册时输入数据的校验 使用widget进行字段设置 实现自定义的校验规则 参考自下面的这篇文章
- vue + element 实现登录注册(自定义表单验证规则)
注册页包含手机验证码登录和密码的二次验证. 效果如下: 实现代码: <template> <div> <div class="register-wrapper& ...
- ant design pro如何实现分步表单时,返回上一步值依然被保存
首先,分步表单ant design pro支持,看官方Demo即可,那么如何实现如题,关键在于设置initialValue {getFieldDecorator('name', { initialVa ...
- 实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
- ant design pro (十三)advanced 错误处理
一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何 ...
- (二)React Ant Design Pro + .Net5 WebApi:前端环境搭建
首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 ...
随机推荐
- Python+Selenium模拟人工抓取数据
Selenium 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7, 8, 9, 10, 11),Mozilla Fire ...
- Qt编写地图综合应用35-设备分布图
一.前言 设备分布图在所有的地图应用案例项目中,最常见最普遍最基础,就是将项目中的设备信息,比如设备名称.设备所在的经纬度坐标.设备的其他信息(设备地址.设备参数等),通过标注点的形式添加到地图中,至 ...
- 在 Vercel 部署随机图 API
在本文中,将详细介绍如何在 Vercel 平台上部署一个具有分类功能的随机图片 API.通过这个 API,用户可以根据不同的分类获取随机图片链接,并且还可以从所有分类中随机获取一张图片. 项目结构 首 ...
- vue el-select封装一个滚动加载更多下拉选项的自定义指令
没有什么讲究,直接上代码 模板部分 <el-select v-model="operator" filterable remote size="small" ...
- CDS标准视图:银行对账单抬头 I_BankStatement
视图名称:银行对账单抬头 I_BankStatement 视图类型:基础 视图代码: 点击查看代码 事务代码:FF67/ 视图结构: 字段名称 技术名称 短代码 BANKSTATEMENTSHORTI ...
- ABC 384(A~F)
期末周的第二把网瘾,vp了一把abc.这把打得还是比较舒服的,做出了A~E.但最后两道题还是出得太慢了(一道思路太慢,一道调试太慢).什么时候能够在赛时做出F题呢qwq... ABC 这场abc的AB ...
- canal源码分析简介-3
5.0 store模块 2018-10-08 23:14:58 8,328 7 1 store模块简介 store模块用于binlog事件的存储 ,目前开源的版本中仅实现了Memory内存模式.官 ...
- 项目PMP之十二项目采购管理
项目PMP之十二--项目采购管理 一.定义:存在法律义务,需要对采购过程了解,非法律专家,合同约束 项目经理无权签署对组织有约束力的法律文件 采购模式: 分散式采购:无采购管理部门,项目经理有采购 ...
- Django设置跨域请求解决方案
Django设置跨域请求解决方案 在现代Web开发中,跨域资源共享(CORS,Cross-Origin Resource Sharing)是一个常见的需求.尤其是在前后端分离的开发模式下,Django ...
- Linux下普通用户免密切换root
问题需求: Linux下普通用户doge免密切换root 问题解决: Linux下普通用户切换到root用户下,默认情况是需要输入密码很不方便,因此需要实现普通用户doge免密切换到root用户. 示 ...