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

news/2024/11/14 12:39:47/

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

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

二、验证方法：

javascript">// 自定义验证方法（**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表单验证中调用验证方法：

javascript">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' }// 价格 非负数 2、自定义验证且添加除了rule, value, callback以外参数的方法使用],remark:[{ required: true, message: "请输入", trigger: "blur" },{min: 1,max: 100,message: "长度在 1 到 100 个字符",trigger: "blur",},],},