表单输入

  <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规则的更多相关文章

  1. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

  2. Element-ui中自定义表单校验规则

    先看一个场景图: 给一个标签el-tag添加表单的校验,且在内容有了以后关闭校验 看代码: <el-form-item class="baseinfo-tags" label ...

  3. 文档驱动 —— 表单组件(五):基于Ant Design Vue 的表单控件的demo,再也不需要写代码了。

    源码 https://github.com/naturefwvue/nf-vue3-ant 特点 只需要更改meta,既可以切换表单 可以统一修改样式,统一升级,以最小的代价,应对UI的升级.切换,应 ...

  4. jquery.validate.js之自定义表单验证规则

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  5. Django 表单校验 表单字段设置 自定义表单校验规则

    今天看到了一篇非常好的博文,拿来和大家分享一下. 内容包括了: 用户注册时输入数据的校验 使用widget进行字段设置 实现自定义的校验规则 参考自下面的这篇文章

  6. vue + element 实现登录注册(自定义表单验证规则)

    注册页包含手机验证码登录和密码的二次验证. 效果如下: 实现代码: <template> <div> <div class="register-wrapper& ...

  7. ant design pro如何实现分步表单时,返回上一步值依然被保存

    首先,分步表单ant design pro支持,看官方Demo即可,那么如何实现如题,关键在于设置initialValue {getFieldDecorator('name', { initialVa ...

  8. 实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...

  9. ant design pro (十三)advanced 错误处理

    一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何 ...

  10. (二)React Ant Design Pro + .Net5 WebApi:前端环境搭建

    首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 ...

随机推荐

  1. 国外著名交易策略:R-Breaker模型设计原理(转载)

    R-Breaker是一种短线日内交易策略,它结合了趋势和反转两种交易方式. 交易系统的基本原理如下: 1.根据前一个交易日的收盘价.最高价和最低价数据通过一定方式计算出六个价位,从大到小依次为:突破买 ...

  2. Qt4/5升级到Qt6吐血经验总结V202308

    00:直观总结 增加了很多轮子,同时原有模块拆分的也更细致,估计为了方便拓展个管理. 把一些过度封装的东西移除了(比如同样的功能有多个函数),保证了只有一个函数执行该功能. 把一些Qt5中兼容Qt4的 ...

  3. Qt编写跨平台RTSP/RTMP/HTTP视频流播放器

    一.前言 很早以前就做过这款播放器的入门版本,最开始用的ffmpeg去解析,后面陆续用vlc播放器.mpv播放器来做,毕竟播放器提供的接口使用也很方便,而且功能强大,后面发现播放器主要的应用场景是播放 ...

  4. 如何查看一个域名所对应的IP地址?

    具体步骤如下: 1.点击电脑左下角开始菜单,打开"运行"选项. 2.然后输入"cmd"并打开. 3.在弹出的页面输入ping+你想要查看的域名,比如新浪网,pi ...

  5. 即时通讯技术文集(第24期):音视频WebRTC好文合集 [共20篇]

    为了更好地分类阅读 52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第 24 期. [- 1 -] 开源实时音视频技术WebRTC的现状 [链接] http://w ...

  6. 网络编程懒人入门(十四):到底什么是Socket?一文即懂!

    本文由cxuan分享,原题"原来这才是 Socket",有修订. 1.引言 本系列文章前面那些主要讲解的是计算机网络的理论基础,但对于即时通讯IM这方面的应用层开发者来说,跟计算机 ...

  7. 【Windows】修改虚拟内存位置

    问题:系统优化中,希望将pagefile.sys文件(即虚拟内存)移动到其他盘中,在网上查找解决办法,找了很多,按照方法设置完成后,pagefile.sys文件依然存在,后来,找到了一篇文章解决了,现 ...

  8. 在Ubuntu WSL2里配置GDAL Docker环境

    在Ubuntu WSL2里配置GDAL Docker环境 启用systemd # Ubuntu中执行 echo -e "[boot]\nsystemd=true" | sudo t ...

  9. 《计算机体系结构与SoC设计》(一)

    1. 天机芯片 "天机"芯片,全称为"天机芯"(Tianjic),是由清华大学施路平团队研发的一款类脑计算芯片.这款芯片在2019年登上了世界顶级学术杂志< ...

  10. jdk并发包源码解析

    一.总括 java底层并发包,笔者将该包大致分成3个层次. 1.基础依赖: 共享变量volatile:有利于线程可见性.Unsafe类:CAS(Compare and Swap)比较并交换,用于并发下 ...