当前位置: 首页 > news >正文

HTML表单验证:确认input元素输入为具有特定整数和小数位数的数值

为了确保HTML表单中的 input元素接收具有特定整数位和小数位数的数值,您需要利用HTML和JavaScript进行前端验证。在HTML5中,可以使用内建的表单验证功能,比如 pattern属性,然而 pattern属性主要用于字符串的正则表达式验证,并不直接支持对数值的整数部分和小数部分的位数进行验证。因此,我们通常会借助JavaScript来实现这种验证。

首先,我们来定义HTML表单的基本结构:

<form id="number-form"><label for="number">请输入数字:</label><input type="text" id="number" name="number" required /><button type="submit">提交</button>
</form>

在上述代码中,我们设定了一个文本 input用来输入数字,required属性确保在提交表单之前用户必须填写该字段。

现在,我们使用JavaScript添加自定义验证。我们的目标是检查用户输入是否符合我们所设定的特定整数位和小数位数的格式,例如,允许用户输入最多3位整数和最多2位小数的数字。

以下是一个完整的JavaScript验证函数,其可以集成到上述HTML表单中:

document.addEventListener('DOMContentLoaded', function() {var form = document.getElementById('number-form');var numberInput = document.getElementById('number');form.addEventListener('submit', function(event) {// 正则表达式匹配最多3位整数和2位小数的数值var regex = /^[0-9]{1,3}(.[0-9]{1,2})?$/;var isNumberValid = regex.test(numberInput.value);// 如果不匹配,则阻止表单提交,并提示用户if (!isNumberValid) {alert('数字格式不正确。请输入最多3位整数和2位小数的数字。');event.preventDefault(); // 阻止表单提交}});
});

上述脚本首先在文档加载完毕后绑定事件监听器。当表单试图提交时将触发验证过程。正则表达式 ^[0-9]{1,3}(.[0-9]{1,2})?$用于匹配格式要求:

  • ^[0-9]{1,3}表示匹配以1至3位数字开头。
  • (.[0-9]{1,2})?表示接受零个或一个点(.)后跟1到2位数字。
  • $确保字符串结束于正则表达式匹配的位置,避免字符串中间有符合格式的数字被错误接受。

如果用户输入的数字不匹配此正则表达式则弹出警告窗口,并阻止表单提交。这保证了只有符合预设格式的数字才能通过验证。

http://www.hskmm.com/?act=detail&tid=12185

相关文章:

  • 课前问题思考3
  • 在CentOS上配置SVN至Web目录的自动同步
  • AIGC在游戏开发中的革命性影响:从生产效率到体验创新 - 详解
  • 使用Docker配置并连接HBase的Java API
  • 在Linux环境下安装和卸载DMETL5数据迁移工具
  • 赛前训练3 欧拉路
  • SQL小贴式: 用NOT EXISTS 而不是 NOT IN !!!
  • 手撕大模型|FlashAttention 原理及代码解析
  • react工程化
  • CF700E Cool Slogans 做题记录
  • 完整教程:在 Ubuntu 上安装和配置 PostgreSQL 实录
  • 一个MCU与FPGA混合电路上电启动的问题及其解决办法探索[原创www.cnblogs.com/helesheng]
  • JMX与RMI
  • 通过主机监控发现路径遍历漏洞的实战技巧
  • Code New Roman 字体的正确下载方式
  • 多态是对于处理不同的变量,但是使用相同或者类似的方式。多态核心分为两种形式:编译时多态(静态多态)和运行时多态(动态多态)C++中多态通常使用虚函数或者指针(引用)实现。
  • 从 C++ 到 Python
  • Nipper 3.9.0 for Windows Linux - 网络设备漏洞评估
  • c++单例实践
  • NOIP 模拟赛九
  • 个人项目-软件工程第二次作业 - Nyanya-
  • 详细介绍:互联网医院品牌IP的用户体验和生态构建
  • 支持 SSL 中等强度密码组(SWEET32) - 漏洞检查与修复
  • C# WPF CommunityToolkit.MVVM (测试一)
  • linux kernel synchronization rcu
  • 锁定Nvidia驱动版本
  • 第二十一章-sql 注入-union 联合注入 (1)
  • Android开发参考
  • 求出e的值
  • 线段树