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 ...
随机推荐
- Qt数据库应用2-数据导出到xls
一.前言 导入导出数据到csv由于语法简单,适用场景有限,于是乎还是必须再造一个轮子导出数据到xls,在经历过数十年的项目实战经验中不断调整和优化.尤其记得当初第一个版本v0.01大概在2011年左右 ...
- Android保活从入门到放弃:乖乖引导用户加白名单吧(附7大机型加白示例)
1.引言 IM在Android上的保活问题经常在即时通讯网的论坛和技术群里被讨论,自从Android 8.0后系统大大降低了后台运行应用的保活容忍度(详见<Android P正式版即将到来:后台 ...
- 并发和并行 | Python中实现多线程 threading 和多进程 multiprocessing
并发和并行 | Python中实现多线程 threading 和多进程 multiprocessing 昨天晚上组会轮到我汇报技术内容,最近正在和 ray 以及 spark 打交道,索性讲一下并发和并 ...
- docker-daemon配置
{ "api-cors-header":"", ------在引擎API中设置CORS标头 "authorization-plugins": ...
- SpringCloud Alibaba(四) - Nacos 配置中心
1.环境搭建 1.1 依赖 <!-- nacos注册中心 注解 @EnableDiscoveryClient --> <dependency> <groupId>c ...
- w3cschool-Linux 命令大全
Linux关机命令和重启命令说明 在Linux中,常用的关机命令shutdown.halt.poweroff.init:重启命令有:reboot.本文将主要为大家带来一些常用的关机命令以及各种关机命令 ...
- cmake:引入第三方库
需求:开源库中一般都需要引入第三方库,下面以引入boost库为例 (1)安装所需的三方库 boost安装:参考 (2)引入 这里的cmakelists文件为: # Import Boost (for ...
- Linux基础:从命令行管理文件系统权限
- Linux基础:更改shell环境
- 详细剖析Java动态线程池的扩容以及缩容操作
前言 在项目中,我们经常会使用到线程来处理加快我们的任务.但为了节约资源,大多数程序员都会把线程进行池化,使用线程池来更好的支持我们的业务. Java线程池ThreadPoolExecutor有几个比 ...