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

非负数（0和正数）限制最大值且保留两位小数，在elementpuls表单中正则自定义验证传更多参数

news 来源：原创 2024/9/20 8:12:47

在这里插入图片描述

一、结构

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

在这里插入图片描述

二、验证方法：


// 自定义验证方法（**1、自定义验证方法的使用**）
var numbMethod=(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 > 9999.99){callback(new Error('数量不能超过9999.99'))}callback()} else if(Number(value) ==0){callback()} else {callback(new Error('请输入正确数字'))// callback(new Error('小数点后最多只能输入两位'))}}
}// 自定义验证方法（**2、自定义验证且添加除了rule, value, callback以外参数的方法使用**）
// 数值验证0+正数（正整数，正小数）小数点两位小数验证
// maxVal传递最大值参数 
const numberMethod=(rule, value, callback, maxVal)=>{const reg = /^(0|[1-9]\d{0,5})(\.\d{1,2})?$/; const strValue = String(value);if (!value) {callback(new Error('请输入'));} else if (isNaN(value)) {callback(new Error('请输入正确的数值'));} else if (strValue.includes('+')) {callback(new Error('输入有误，请不要输入加号'));} else {const floatValue = parseFloat(value); // 将输入值转换为浮点数if (floatValue < 0) {callback(new Error('数值不能为负数'));} else {// 检查小数位数const stringValue = value.toString();if (stringValue.includes('.')) {const decimalPart = stringValue.split('.')[1];if (decimalPart.length > 2) {callback(new Error('小数点后最多只能输入两位'));return;}else if(decimalPart.length<1){callback(new Error('小数点后不能为空'));return;}}// 检查数值范围if (floatValue > maxVal) {callback(new Error(`数字最大不得超过${maxVal}`));return;}callback();}}
}

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

rules: {//number:[{ required: true, validator: numberMethod, trigger: 'blur' }],// 数量 非负数 1、自定义验证方法的使用price: [{required: true, message: '单价不能为空', trigger: 'blur'},{ required: true, validator:(rule, value, callback) => {priceMethod(rule, value, callback, 9999999.99)}, trigger: 'blur' }],
number:[{required: true, message: '数量不能为空', trigger: 'blur'},// trigger:['blur','change'] 实时检测是否查出最大值且鼠标失去焦距时也检测是否超最大值（防止失去焦距时验证失效）{ required: true, validator:(rule, value, callback) => {priceMethod(rule, value, callback, 9999.99)}, trigger: ['blur','change'] }// 数量 非负数 2、自定义验证且添加除了rule, value, callback以外参数的方法使用],price: [{required: true, message: '单价不能为空', trigger: 'blur'},// trigger:['blur','change'] 实时检测是否查出最大值且鼠标失去焦距时也检测是否超最大值（防止失去焦距时验证失效）{ required: true, validator:(rule, value, callback) => {priceMethod(rule, value, callback, 9999999.99)}, trigger: ['blur','change'] }// 单价 非负数 2、自定义验证且添加除了rule, value, callback以外参数的方法使用],amount:[{required: true, message: '金额不能为空', trigger: 'blur'},// 由于amount值 = number * price，且amount设置了disabled（不可编辑，只能根据计算属性得出，没有失去焦距一说）故此trigger: 'change'只需在改变时校验是否查出最大值即可{ required: true, validator:(rule, value, callback) => {priceMethod(rule, value, callback, 999999999.99)}, trigger: 'change' }// 金额 非负数 2、自定义验证且添加除了rule, value, callback以外参数的方法使用],remark:[{ required: true, message: "请输入", trigger: "blur" },{min: 1,max: 100,message: "长度在 1 到 100 个字符",trigger: "blur",},],},