表单输入

  <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. Qt编写物联网管理平台50-超强跨平台

    一.前言 跨平台的需求,除了是用户的需求外,也是为了适应日益增长的国产操作系统的发展的需要,当前国产操作系统发展的如火如荼,100%都是围绕linux系统展开,说的好听点就是站在巨人的肩膀上开发,不好 ...

  2. 关于Qt中的qss样式表需要注意的坑

    关于QSS要注意的坑. qss源自css,相当于css的一个子集,主要支持的是css2标准,很多网上的css3的标准的写法在qss这里是不生效的,所以不要大惊小怪. qss也不是完全支持所有的css2 ...

  3. Solution -「JOISC 2017」「LOJ #2392」烟花棒

    \(\mathscr{Description}\)   Link.   有 \(n\) 个人站在数轴上,第从左往右第 \(i\) 个人的坐标是 \(x_i\),每个人手上有一支烟花棒,每支烟花棒能燃烧 ...

  4. .NET 9 new features-Microsoft.ML.Tokenizers 库

    在 .NET 9 中,微软引入了 Microsoft.ML.Tokenizers 库,为 .NET 开发者提供了强大的文本标记化功能. 一.什么是Microsoft.ML.Tokenizers Mic ...

  5. Activiti、Flowable和Camunda选型和对比

    https://camunda.com/https://www.jianshu.com/p/5942c4ee513chttps://zhuanlan.zhihu.com/p/484107368http ...

  6. 如何解决:Android Studio (version 4.1); Flutter plugin not installed and Dart plugin not installed errors

    出现的现象 android studio 4.1已经安装了flutter和dart插件,但是执行 flutter doctor依然报错. [!] Android Studio (version 4.1 ...

  7. H5调用手机拨打电话的功能

    里面加上: 我没有写也是可以的 <meta name="format-detection" content="telephone=yes"/> 该标 ...

  8. 亮相CCF中国软件大会,天翼云助力千行百业搭上“数字快车”

    中国软件领域规模最大.影响最广的学术会议--CCF中国软件大会(ChinaSoft 2023)在上海国际会议中心开幕.CCF理事长.大会执行委员会荣誉zhu席.中国科学院院士梅宏,上海市经济和信息化委 ...

  9. 使用MTR网络诊断

    安装 MTR Ubuntu: apt update apt upgrade apt install mtr-tiny CentOS: yum update yum install mtr 使用 MTR ...

  10. clickhouse 为什么如此快及优化

    一.clickhouse 为什么如此快 1)优秀的代码,对性能的极致追求 clickhouse 是 CPP 编写的,代码中大量使用了 CPP 最新的特性来对查询进行加速. 2)优秀的执行引擎以及存储引 ...