关于 input 如何对输入框进行限制数字，小数点，及小数点后数字个数等问题

前端在使用 input 输入框时，经常会使用正则表达式来添加一些限制，而很多需求没有一个现成的表达式。该回答是自己项目遇到的需求所使用的一些方法。主要针对数字的输入（项目使用的是vue）。
除去添加的正则表达式外，我们可以在用户输入过程中对输入内容进行校验（使用 input 的 oninput 事件），也可以在用户输入完之后进行校验（使用 input 的 onblur 事件）。

一：限制只能输入数字和小数点

只能输入数字

this.inputValue = this.inputValue.replace(/[^\d]/g, ""); // 清除"数字"以外的字符 

只能输入数字和小数点

this.inputValue = this.inputValue.replace(/[^\d.]/g, ""); // 清除"数字"和"."以外的字符

二：限制小数点输入个数，只能输入一个小数点

this.inputValue = this.inputValue.replace(/\.{2,}/g, "."); // 不能连续输入两个及以上小数点
this.inputValue = this.inputValue
	.replace(".", "$#$")
	.replace(/\./g, "")
	.replace("$#$", "."); // 只保留第一个".", 清除多余的"."

三:限制小数点后位数个数

只能输入一位小数点

this.inputValue = this.inputValue.replace(
	/^(-)*(\d+)\.(\d).*$/,
	"$1$2.$3"
); // 只能输入一位小数

只能输入两位小数点

this.inputValue = this.inputValue.replace(
	/^(-)*(\d+)\.(\d\d).*$/,
	"$1$2.$3"
); // 只能输入两位小数

只能输入三位小数点，之后的以此类推

this.inputValue = this.inputValue.replace(
	/^(-)*(\d+)\.(\d\d\d).*$/,
	"$1$2.$3"
); // 只能输入三位小数

四：当没有小数点时，不能是01，02，001这样的数

如果有小数点是可以输入0.1，0.001等，但是没有小数点就不能输入0开头的数字，即不能输入01，02等。

if (
	this.inputValue &&
	this.inputValue.indexOf(".") < 0 &&
	this.inputValue != ""
) {
	this.inputValue = parseFloat(this.inputValue);
	this.inputValue = this.inputValue + ""; // 变回为字符串
} // 如果没有小数点，首位不能为类似于 01、02的值

五：如果小数点后面全是零，则清空小数点后的零

当有小数点位数限制时，例如小数点后可以输入六位小数

	// 输入过程中，只能输入六位小数且六位小数都为零，则清空小数点和后面的六个零（如果输入完成了只输入四个零，则在blur事件中处理）
if (
	this.inputValue.indexOf(".") > 0 &&
	this.inputValue.length - this.inputValue.indexOf(".") > 6
) {
	let str = this.inputValue.slice(
		this.inputValue.indexOf("."),
		this.inputValue.length
	);
	if (str / 1 <= 0) {
		this.inputValue = this.inputValue.replace(str, "");
	}
}

在 blur 事件中，如果小数点后面全是零，则清空小数点和后面的零

if (this.inputValue.indexOf(".") > 0) {
	let str = this.inputValue.slice(
		this.inputValue.indexOf("."),
		this.inputValue.length
	);
	if (str / 1 <= 0) {
		this.inputValue = this.inputValue.replace(str, "");
	}
}

六：限制输入数字的大小

这部分可以通过 input 的属性来完成，或正则表达式
max： 规定输入字段的最大值（与min配合使用）且需要 input 的 type 为 number 时 max min 才生效
maxlength：规定输入字段中的字符的最大长度

也可以在 input 事件中设置，例如输入最大的数是256

if (this.inputValue / 1 > 256) {
	this.inputValue = this.inputValue + "";
	this.inputValue = this.inputValue.slice(0, this.inputValue.length - 1);
}

以上就是个人所使用的方法，需要注意的是会使用 slice(), replace(), indexOf(), 等方法，也存在一些计算判断的地方，存在一些字符串和数值之间的数据类型转换。
贴上部分代码：

<input
	class="border"
	type="text"
	@input="inputEnter"
	@blur="inputBlur"
	v-model="inputValue"
/>

inputEnter() {
	this.inputValue = this.inputValue.replace(/[^\d.]/g, ""); // 清除"数字"和"."以外的字符 只能输入数字和小数点
	this.inputValue = this.inputValue.replace(/\.{2,}/g, "."); // 不能连续输入两个及以上小数点
	this.inputValue = this.inputValue
		.replace(".", "$#$")
		.replace(/\./g, "")
		.replace("$#$", "."); // 只保留第一个".", 清除多余的"."
	this.inputValue = this.inputValue.replace(
		/^(-)*(\d+)\.(\d\d\d\d\d\d).*$/,
		"$1$2.$3"
	); // 只能输入六位小数
	if (
		this.inputValue &&
		this.inputValue.indexOf(".") < 0 &&
		this.inputValue != ""
	) {
		this.inputValue = parseFloat(this.inputValue);
		this.inputValue = this.inputValue + "";
	} // 如果没有小数点，首位不能为类似于 01、02的值
	// 输入过程中，只能输入六位小数且六位小数都为零，则清空小数点和后面的六个零（如果输入完成了只输入四个零，则在blur事件中处理）
	if (
		this.inputValue.indexOf(".") > 0 &&
		this.inputValue.length - this.inputValue.indexOf(".") > 6
	) {
		let str = this.inputValue.slice(
			this.inputValue.indexOf("."),
			this.inputValue.length
		);
		if (str / 1 <= 0) {
			this.inputValue = this.inputValue.replace(str, "");
		}
	}
	if (this.inputValue / 1 > 256) {
		this.inputValue = this.inputValue + "";
		this.inputValue = this.inputValue.slice(0, this.inputValue.length - 1);
	}
},
inputBlur() {
	// 若小数点后面全是零，则清楚小数点和后面的零
	if (this.inputValue.indexOf(".") > 0) {
		let str = this.inputValue.slice(
			this.inputValue.indexOf("."),
			this.inputValue.length
		);
		if (str / 1 <= 0) {
			this.inputValue = this.inputValue.replace(str, "");
		}
	}
},

如有错误，欢迎指正，谢谢！
以上内容仅共参考，欢迎大家讨论。