您的位置:首页 > 娱乐 > 明星 > 非负数(0和正数) 限制最大值且保留两位小数,在elementpuls表单中正则自定义验证传更多参数

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

2024/12/23 16:28:46 来源:https://blog.csdn.net/qq_39536826/article/details/140958487  浏览:    关键词:非负数(0和正数) 限制最大值且保留两位小数,在elementpuls表单中正则自定义验证传更多参数

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

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com