js正则:input 输入限制
创始人
2025-05-29 15:46:08

这里写自定义目录标题

  • 正则:input 输入限制(IP和数值类型规则限制输入)
  • 核心方法 input 输入框的 oninput 监听事件
    • 1、IP输入检验及限制
    • 2、数值(含负数、保留两位)输入检验及限制

正则:input 输入限制(IP和数值类型规则限制输入)

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

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

1、IP输入检验及限制

上代码:


// 注
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、数值(含负数、保留两位)输入检验及限制


// 注
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.这样悬停的输入状态!

相关内容

热门资讯

月光中的蓝色高二作文(精选3... 月光中的蓝色高二作文 篇一月光中的蓝色夜晚的校园,月光如一缕蓝色的柔光洒在地上。我静静地坐在校园的长...
我的春夏秋冬作文(推荐3篇) 我的春夏秋冬作文 篇一四季更迭,春夏秋冬交替,每个季节都有着独特的魅力。其中,我最喜欢的季节是春天。...
诚信高一作文(经典6篇) 诚信高一作文 篇一诚信的重要性诚信是一种道德品质,是人们在与他人交往中应当秉持的一种态度和行为准则。...
高二励志作文【推荐6篇】 高二励志作文 篇一:砥砺前行,追逐梦想的力量每个人都有自己的梦想,有的人梦想成为一名医生,有的人梦想...
高二温暖的作文(实用3篇) 高二温暖的作文 篇一爱,是一种温暖的力量人生中有许许多多的温暖瞬间,而其中最温暖的莫过于那些关于爱的...