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>
相关推荐
weixin-a153003083162 分钟前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头29 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's36 分钟前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心1 小时前
vben 之 axios 封装
前端·javascript·学习
遗憾随她而去.2 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09012 小时前
浅析Web存储系统
前端
foxhuli2293 小时前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端