ant-design-vue form表单自定义校验规则

cpp 复制代码
 <a-form-item
                label="市场价"
                class="status-barcode"
                name="marketPrice"
                :rules="[
                  { required: true, message: '' },
                  { validator: validateNumber },
                ]"
              >
                <a-input
                  show-count
                  :maxlength="10"
                  v-model:value="formState.marketPrice"
                  placeholder="市场价"
                />
              </a-form-item>
cpp 复制代码
const objRegExp = {
  marketPrice: "市场价格",
};
const NumberRegCommodity = /^(?!0)\d{1,10}$/;
const validateNumber = (rule, value, callback) => {
  if (!value) {
    callback(`请填写${objRegExp[rule.field]}`);
    return;
  }
  if (!NumberRegCommodity.test(value)) {
    callback("仅限填写正数且首位不能为0");
  }
};
相关推荐
是上好佳佳佳呀1 天前
【前端(七)】CSS3 核心属性笔记:单位、背景、盒子模型与文本换行
前端·笔记·css3
踩着两条虫1 天前
VTJ:技术架构概述
前端·架构·ai编程
超级无敌攻城狮1 天前
Agent 到底是怎么跑起来的
前端·后端·架构
吴声子夜歌1 天前
Vue3——过度和动画效果
前端·vue.js·es6
Via_Neo1 天前
字符串类型的相互转换
前端
zopple1 天前
前端三剑客 vs Vue.js:核心区别解析
前端·javascript·vue.js
hsjcjh1 天前
窗口函数-详细讲解分析
java·服务器·前端
CDN3601 天前
【踩坑实录】前端开发必看:一次由CSS缓存引发的线上事故与SEO反思
前端·css·缓存
胡志辉的博客1 天前
本地明明好好的,怎么一上线就跨域了?把同源策略、前后端分工和 CORS 一次讲明白
前端·javascript·vue.js·reactjs·nextjs·跨域
|晴 天|1 天前
文章系列管理系统:拖拽排序与进度追踪
前端·vue.js·typescript