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

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：再学C语言45：字符串输入

下一篇：预约有礼 | 迅镭激光与您相约2023深圳工业展，诚邀参观！

相关内容

热门资讯

聊一聊系统重构 打破常规，重立新规； 01 开始想聊这个话题的时候，我是...
【华为OD机试 2023最新 ... 给定一个 m x n 的矩阵，由若干字符 ‘X’ 和 ‘O’构成，’X’表示该处已被占据，’O’表示...
Python爬虫——Pytho... JSON（JavaScript Object Notation）是一种轻...
Spring Boot 3.0... 有道无术，术尚可求，有术无道，止于术。 本系列Spring Boot版本3.0.3 源码地址：ht...
KANO模型(卡诺模型)：产品... 在做项目做产品的过程中，作为互联网产品设计师的我们，经常会接到来自PM/...
连载一：go安装和配置环境变量 go语言标准库地址：Go语言标准库文档中文版 | Go语言中文网 | Golang中文...
手把手教你基于HTML、CSS... The sand accumulates to form a pagoda写在前面HTML是什么&#...
字节测试工程师悄悄告诉我的软件... 目录 前言 测试策略的关注重点 测试策略主要内容 总体测试策略 初级版本测试策略 跟踪测试执行 版本...
STM32学习（五） GPIO General Purpose Input Output，通用输入输出端口&...
开发还分前、后端？它们都是做什... 开发还分前、后端？它们都是做什么的？ 2023-03-20 14:54·...
Nordic nRF5 mes... nRF5 mesh蓝牙组网软件SDK下载链接： NordicSemiconductor...
【uniapp tabs标签组... 前言 这个tabs功能是很多移动端项目都要用的 最近我刚好遇到了这个功能 因为我们项目不让用uvie...
电子采购管理软件开发功能有哪些... 电子采购系统是将供应商、招标机构、评标专家、政府监督机构等连接起来，企业、机关和个人在...
K8S集群1.24使用dock... 文章目录1. 环境介绍2. 异常信息3. 分析问题3.1 kubernetes 健康检查3.1.1 ...
TS接口类型 40. TS接口 1. 定义 TypeScript 中的接口是一种抽象结构，用于定义对...
Time out. EFI N... 背景：最近使用了虚拟机，正准备安装个Windows10的操作系统...
数字电路2. OC门、OD门、... 数字电路2. OC门、OD门、三态门一、OC门——集电集开路门1. 基本概念2. 作用3. 使用要点...
操作系统性能优化实践 感谢内容提供者：四川省奇呱科技有限公司 文章目录一、常见性能指标及USE法分类1.C...
展现AI与自动化测试技术之间的... 目录：导读 前言 一、介绍 1、什么是自动化测试技术 2、痛点 3、几款优秀的自动化测...
第一周web 目录 [NISACTF 2022]popchains  [NSSCTF 2022 Spring Re...
百元降噪耳机推荐，适合学生党入... ​降噪蓝牙耳机怎么选？有哪些适合学生党使用的百元降噪蓝牙耳机？很多人在面...
C# winform坐标系类型... C# winform坐标系类型详解 GDI+ 使用三个坐标空间：世界、页面和设...
Windows平台安装MacO... 写在前面：博主是一只经过实战开发历练后投身培训事业的“小山猪”，昵称取自...
Windos远程连接Linux... ssh安装 使用root用户登录 su root 更换apt 下载源为清华源，先备...
近期媒体邀约活动总结，注意事项 传媒如春雨，润物细无声，大家好，我是51媒体网胡老师。 随...
每日一博 - Java 异步编... 文章目录概述概述Executor与线程池Java 中的线程池使用线程池的注意事项强烈建议使用有界队列...
thinkphp基础学习 Composer安装thinkphp6，输入命令，其中tp为项目目录名可...
10从零开始学Java之开发J... 作者：孙玉昌，昵称【一一哥】，另外【壹壹哥】也是我哦CSD...
项目团队任务分配的5大注意事项         想要把工作合理分配给下属，在进行项目团队任务分配时，需要...
scratch猜数字游戏 电子... 目录 scratch猜数字游戏 一、题目要求 1、准备工作 2、功能实现 二、案例分析 <