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>
相关推荐
eason_fan15 分钟前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript
无羡仙17 分钟前
JavaScript 迭代器
前端
XiaoSong39 分钟前
从未有过如此丝滑的React Native开发体验:EAS开发构建完全指南
前端·react.js
掘金者阿豪1 小时前
打通KingbaseES与MyBatis:一篇详尽的Java数据持久化实践指南
前端·后端
RoyLin1 小时前
TypeScript设计模式:原型模式
前端·后端·node.js
我是天龙_绍2 小时前
vue Composables 组合式函数
前端
zjjuejin2 小时前
Maven项目的核心蓝图:POM文件
前端·maven
小气小憩2 小时前
“暗战”百度搜索页:Monica悬浮球被“围剿”,一场AI Agent与传统巨头的流量攻防战
前端·人工智能
前端付豪2 小时前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮2 小时前
js符号(Symbol)
前端·javascript