当前位置：首页 > news >正文

非负数、0和正整数限制最大值且保留两位小数在elementpuls表单中正则验证

news 2025/7/21 1:58:23

在这里插入图片描述
一、结构

<el-form-item label="单价：" prop="price"><el-inputv-model.trim="formData.price"placeholder="请输入"@blur="formMethod.fixTwo"><template #append>(元)</template></el-input></el-form-item>

二、验证方法：

//@blur="formMethod.fixTwo"的方法保证两位小数
fixTwo:(val)=>{let centerNum = Number(val.target.value)if(val.target.value == 0 || val.target.value == "0"){val.target.value == 0}else if(centerNum >= 0){val.target.value = centerNum.toFixed(2)}},// 验证0和正整数
var numberMethod=(rule, value, callback)=>{const reg = /^[0-9]+$/;if (!value) {callback(new Error('请输入'))} else {if (reg.test(value)) {if(value > 9999999.99){callback(new Error('数字最大不得超过9999999.99'))}callback()} else {callback(new Error('请输入正确数字'))}}
}// 验证非负数（0+正数）
var priceMethod=(rule, value, callback)=>{const reg = /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/; //非负数/^\d+.?\d{0,2}$/;if (!value) {callback(new Error('请输入'))} else if (!Number(value) && value!="0"&&value!=0) {callback(new Error('请输入数字值'))} else {if (reg.test(value)) {if(value > 9999999.99){callback(new Error('数字最大不得超过9999999.99'))}callback()} else if(Number(value) ==0){callback()} else {callback(new Error('请输入正确数字'))// callback(new Error('小数点后最多只能输入两位'))}}
}

三、在elementplus表单验证中调用验证方法：

rules: {number:[{ required: true, validator: numberMethod, trigger: 'blur' }],// 数量 0+正整数price: [{ required: true, validator: priceMethod, trigger: 'blur' }],// 价格 非负数amount:[{ required: true, validator: priceMethod, trigger: 'blur' }],// 金额 非负数remark:[{ required: true, message: "请输入", trigger: "blur" },{min: 1,max: 100,message: "长度在 1 到 100 个字符",trigger: "blur",},],},