正则：input 输入限制（IP和数值类型规则限制输入）

有些情况下，需求要求我们在form表单输入就立即做出相应的限制，而非输入完成后再做检验。因此，这时候就需要用到一边输入一边匹配规则的限制了。

核心方法 input 输入框的 oninput 监听事件

1、IP输入检验及限制

上代码：

<template><div><input maxlenght="15"placeholder="IP输入限制"oninput="value=value.replace(/[^\d.]/g,'').replace(/\.{2,}/g,'.').replace(/^0(\d)$/g,'$1').replace(/\.0\d$/g,'.$1').replace(/[3-9]\d\d|2[6-9]\d|25[6-9]|\d{4,}/g,'255').replace(/^(\d{1,3}\.)(\d{1,3}\.)(\d{1,3}\.)(\d{1,3})/,'$1$2$3$4')"></input></div>
</template>
// 注
replace(/[^\d.]/g,'') // 限制输入仅为数字和点
replace(/\.{2,}/g,'.') // 限制输入点不能连续输入超过2个
replace(/^0(\d)$/g,'$1') // 限制0为开头时，不能再输入0且01将替换为1
replace(/\.0\d$/g,'.$1') // 限制点后面的0为开头时，不能再输入0且01将替换为1
replace(/[3-9]\d\d|2[6-9]\d|25[6-9]|\d{4,}/g,'255') // 限制输入超过255时，替换为255
replace(/^(\d{1,3}\.)(\d{1,3}\.)(\d{1,3}\.)(\d{1,3})/,'$1$2$3$4') // 限制IP输入超过0.0.0.0格式后，无法再继续输入，比如错误格式 0.1.2.3.4

以上就能完美限制IP输入格式

2、数值（含负数、保留两位）输入检验及限制

<template><div><input maxlenght="15"placeholder="数值（含负数、保留两位）输入限制"oninput="value=value.replace(/[^\d.-]/g,'').replace(/(\d)-/g,'$1').replace(/^-\.$/g,'-0.').replace(/^-0+(\d)$/g,'-$1').replace(/^\./g,'0.').replace(/^0+(\d)$/g,'$1').match(/^-?\d*(\.?\d{0,2})/g)"></input></div>
</template>
// 注
replace(/[^\d.-]/g,'') // 限制输入仅为数字、点和负号
replace(/(\d)-/g,'$1') // 限制输入数字后不可输入负号-
replace(/^-\.$/g,'-0.') // 限制-和.一起时，替换为-0.开头的数值
replace(/^-0+(\d)$/g,'-$1') // 限制-和0为开头时，替换为-01为-1
replace(/^\./g,'0.') // 限制点.为开头时，替换为0.开头的数值
replace(/^0+(\d)$/g,'$1') //限制0为开头时，不能再输入0且01将替换为1
match(/^-?\d*(\.?\d{0,2})/g) // 最后校验是否满足数字格式

以上就能完美限制数值输入格式了！
当然，这个还是需要做最后的 isNaN（）判断，因为可能存在0.或-0.这样悬停的输入状态！