关于 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(), 等方法，也存在一些计算判断的地方，存在一些字符串和数值之间的数据类型转换。
贴上部分代码：
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, ""); } } }, 如有错误，欢迎指正，谢谢！ 以上内容仅共参考，欢迎大家讨论。
贲门的位置图
瑞文打剑姬 超神锐雯对线剑姬攻略