elementui表单验证，数字类型且有小数点的校验，例如：价格、重量等

原创已于 2022-08-12 10:42:21 修改 · 4.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #typescript

于 2022-05-19 15:12:47 首次发布

vue 同时被 2 个专栏收录

76 篇文章

订阅专栏

ElementUi

11 篇文章

订阅专栏

本文介绍如何在Vue的el-form-item中使用v-model.number限制输入价格，包括正则表达式校验和避免小数点输入问题，同时给出详细的校验规则和示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单校验如果直接使用v-model.number会无法输入小数点

<el-form-item label="价格" prop="price">
  <el-input
  	oninput="value=value.replace(/[^\d|.]/g,'')"
    @blur="form.price = $event.target.value"
    v-model="form.price"
    placeholder="请输入价格"
   />
</el-form-item>

// 校验规则
let validatorPrice = (rule, value, callback) => {
  if (!value) return callback(new Error('请输入金额'))
  if (!Number(value)) return callback(new Error('请输入数字值'))
  // let reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{0,2})$/g; //小数限制0-2位
  let reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
  if (!reg.test(value)) return callback(new Error('请输入正确价格'));
  callback();
}
...
rules: {
	price: [{required: true, validator: validatorPrice, trigger: "blur"}],
	...
},