关于elementui表单验证数字的问题

千里之行始于足下

熟能生巧,不熟怎么生巧

最近编写项目时候遇到一个这样的问题,elementui 表单验证价格是否为数字,

正常来说只需要将规则写为如下

javascript 复制代码
 { required: true, type: 'number', message: "请填写正确的数字", trigger: "blur" },

并且给v-model 加上.number修饰符,即可,但是我遇到这样一种情况

如果为修改情况,将获取到的值赋予给form组件后,提交修改会触发验证失败问题,才知道,number修饰符是在修改值时候才会触发,也就是一开始赋予的值是一个数字字符串,并没有被转换,而验证规则要求是一个数字,而非数字字符串,进而无法通过验证

一开始我是这样想着洁解决的:

1、在赋予表单值时候,将里边的数字字符串转为数字

2、自定义验证规则

javascript 复制代码
const validatePrice = (rule: any, value: any, callback: any) => {
  const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
  if (reg.test(value)) {
    callback();
  } else {
    return callback(new Error("请填写正确的数字"))
  }
}

3、最终发现问题应该出在数据库表设计的不合理上,将price类型修改为float即可,这样子就没必要写多余的验证器了,但是如果想验证是否为大于0 的合规的价格,也可以做验证 (验证器也有方法可以设置,设置规则当中min即可)

相关推荐
钮钴禄·爱因斯晨19 小时前
不只是字符串:Actix-web 路由与 FromRequest的类型安全艺术
前端·安全
杜子不疼.19 小时前
仓颉语言构造函数深度实践指南
java·服务器·前端
IT_陈寒19 小时前
我用这5个JavaScript性能优化技巧,让页面加载速度提升了60%
前端·人工智能·后端
风一样的美狼子19 小时前
仓颉语言 LinkedList 链表实现深度解析
java·服务器·前端
zero13_小葵司19 小时前
JavaScript 性能优化系列(六)接口调用优化 - 6.4 错误重试策略:智能重试机制,提高请求成功率
开发语言·javascript·ecmascript
艾小码19 小时前
2025年,我为什么建议你先学React再学Vue?
前端·vue.js·react.js
谢尔登19 小时前
【GitLab/CI】前端 CI
前端·ci/cd·gitlab
Predestination王瀞潞20 小时前
WEB前端技术基础(第四章:JavaScript-网页动态交互语言)
前端·javascript·交互
静西子1 天前
Vue3路由
前端·javascript·vue.js
J总裁的小芒果1 天前
vue3 全局定义动态样式
前端·javascript·vue.js