正则：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.这样悬停的输入状态！