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

千里之行始于足下
熟能生巧,不熟怎么生巧

最近编写项目时候遇到一个这样的问题,elementui 表单验证价格是否为数字,
正常来说只需要将规则写为如下

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

并且给v-model 加上.number修饰符,即可,但是我遇到这样一种情况
如果为修改情况,将获取到的值赋予给form组件后,提交修改会触发验证失败问题,才知道,number修饰符是在修改值时候才会触发,也就是一开始赋予的值是一个数字字符串,并没有被转换,而验证规则要求是一个数字,而非数字字符串,进而无法通过验证
一开始我是这样想着洁解决的:
1、在赋予表单值时候,将里边的数字字符串转为数字
2、自定义验证规则

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即可)
在这里插入图片描述

### ElementUI 表单验证只允许输入数字 为了确保表单字段仅接受数字,在ElementUI中可以通过设置特定的规则来实现这一需求。对于简单的数字验证,可以利用内置的`type: 'number'`选项[^3]。 然而,如果需要更复杂的控制,比如防止用户输入任何非数字字符,则可能需要采用自定义校验函数或是通过正则表达式配合`pattern`属性来进行更为严格的限制[^2]。 下面是一个使用自定义校验器的例子: ```javascript // 定义 rules 对象内的 rule 来指定 prop 属性对应的验证逻辑 rules: { numberField: [ { validator: validateNumber, trigger: 'blur' } ] } function validateNumber(rule, value, callback) { const regex = /^\d*$/; if (!regex.test(value)) { return callback(new Error('请输入有效的整数')); } else { callback(); } } ``` 此代码片段展示了如何创建一个名为 `validateNumber` 的函数作为validator,它接收三个参数:当前规则对象 (`rule`)、被检验的数据项(`value`)以及回调函数(`callback`)。当检测到非法输入时调用`callback(error)`传递错误信息给框架;反之如果没有发现问题就简单地执行`callback()`表示成功[^4]。 另外一种方法是在HTML模板里直接应用内联JavaScript处理键入事件,从而即时阻止不符合条件的内容进入模型状态。例如,可以在 `<el-input>` 组件上附加 `oninput` 或者其他合适的DOM事件监听器以过滤掉不想要的按键组合[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值