antd Form 校验自定义复杂判断-validator

antd Form 校验 加入自定义复杂逻辑

javascript 复制代码
          <Form.Item
                label="编码"
                name="code"
                rules={[
                  {
                    required: true,
                    validator: (_rule, value) => {
                      if (value === '') {
                        return Promise.reject('请输入编码');
                      }
                      return IsExist(value).then((res) => {
                        if (res?.statusCode === 200) {
                          return Promise.resolve();
                        } else {
                          //return Promise.reject(res?.message);
                          //调用接口考虑接口报错提示
                          return Promise.reject("编码已经存在,请重新输入");
                        }
                      }).catch(err=>{
                        return Promise.reject(err?.message);
                      });
                    },
                  },
                ]}
              >
                <Input maxLength={50} />
              </Form.Item>

写出方法:

validateLimit 方法:

javascript 复制代码
const validateLimit = async (rule, value) => {
    console.log(rule, value, !!value.trim());
    if (!!value.trim()) {
      return Promise.resolve();
    } else {
      return Promise.reject(new Error('不能输入空格!'));
    }
  };
javascript 复制代码
               <Form.Item
                    name="name"
                    rules={[
                      { required: true, message: '请输入名称' },
                      { validator: validateLimit },
                      // {
                      //   pattern: /^(?!\s)(?!.*\s$)/,
                      //   message: '首尾不能输入空格',
                      // },
                    ]}
                  >
                    <Input
                      bordered={false}
                      placeholder="请输入"
                      style={{ textAlign: 'center' }}
                    />
                  </Form.Item>
相关推荐
吃饺子不吃馅4 分钟前
项目上localStorage太杂乱,逼我写了一个可视化浏览器插件
前端·javascript·chrome
golang学习记5 分钟前
从0 死磕全栈之Next.js 环境变量实战指南:企业级多环境(dev/test/prod)配置最佳实践
前端
.生产的驴31 分钟前
React 集成Redux数据状态管理 数据共享 全局共享
前端·javascript·react.js·前端框架·css3·html5·safari
IT_陈寒33 分钟前
Redis性能优化的7个隐藏技巧:从慢查询到亿级QPS的实战经验分享
前端·人工智能·后端
艾小码1 小时前
ES6+革命:8大特性让你的JavaScript代码质量翻倍
前端·javascript
两个西柚呀1 小时前
Vue组件的一些底层细节
前端·javascript·vue.js
IT技术分享社区1 小时前
前端:浏览器Content Security Policy 安全策略介绍和用法
前端·前端开发
林强1815 小时前
前端文件预览docx、pptx和xlsx
前端
像是套了虚弱散7 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan7 小时前
【CTF】强网杯2025 Web题目writeup
前端