element的el-input,想要输入表单的时候只输入范围数字

发布时间 2023-07-20 15:32:41作者: 影思密达ing
<el-form-item label="通过门限:" prop="passRate">
					<el-input
						placeholder="请输入"
						type="number"
						@input="oninput($event)"
						clearable
						v-model="addReviewForm.passRate"
						maxlength="30"
					>
						<template #append>%</template>
					</el-input>
				</el-form-item>

  

const oninput = (val: any) => {
	let value: any = "";
	if (val) {
		if (Number(val.replace(/[^\d]+/g, "")) > 100) {
			value = 100;
		} else if (Number(val.replace(/[^\d]+/g, "")) == 0) {
			value = 1;
		} else {
			value = Number(val.replace(/[^\d]+/g, ""));
		}
		//value = Number(val.replace(/[^\d]+/g, "")) > 100 ? 100 : Number(val.replace(/[^\d]+/g, ""));
	}

	addReviewForm.value.passRate = value;
};

eg:只能输入1-100的正整数  

这样就可以解决问题了

隐含的坑点:网上之前查的解决方案,比如在这个输入框里面进行中文输入->负数,再输入其他的输入框,再回来进行中文输入->负数,提交时候这个表单字段的值会显示为' “空字符串,有问题