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");
  }
};
相关推荐
嘉琪0011 分钟前
Day8 完整学习包(Vue 基础 & 响应式)——2026 0320
前端·vue.js·学习
FlyWIHTSKY2 分钟前
Vue3 单文件中不同的组件
前端·javascript·vue.js
一字白首14 分钟前
小程序组件化进阶:从复用到通信的完整指南DAY04
前端·小程序·apache
读忆16 分钟前
你是否用过Tailwind CSS?你是在什么情况下使用的呢?
前端·css·经验分享·笔记·taiiwindcss
阿珊和她的猫20 分钟前
探秘小程序:为何拿不到 DOM 相关 API
前端·小程序
FlyWIHTSKY31 分钟前
Vue 3 onMounted 中控制同步与异步执行策略
前端·javascript·vue.js
PascalMing34 分钟前
告别 Nginx!ASP.NET Core 实现多域名 Vue 静态服务与代理转发
vue.js·nginx·asp.net
蜗牛攻城狮36 分钟前
【Vue3实战】El-Table实现“超过3行省略,悬停显示全文”的完美方案(附性能优化)
前端·vue.js·性能优化·element-plus
孙12~36 分钟前
前端vue3+vite,后端SpringBoot+MySQL
前端·html·学习方法
隔壁小邓38 分钟前
vue的组件化的理解之单独拆分的组件&组件的封装
前端·javascript·vue.js