【前端】使用jQuery探索正则表达时,金额验证、纯数字验证等

简介: 本篇文章将探索正则表达式的功能在前端,输入金额时,需要对输入值进行验证,只能出现金额和小数点,或者有些值需要保留2位小数点时,那么通过正则表达式验证就非常的方便和高效
作者:小5聊基础
简介:一只喜欢全栈方向的程序员,欢迎咨询,尽绵薄之力答疑解惑
编程原则:Write Less Do More

【正则表达式特点】

1)文本模式,能读懂字符串匹配规则<br/>
2)写法<br/>
var re=new RegExp('规则', '可选参数');<br/>
var re=/规则/修饰参数;<br/>
3)修改符<br/>

编号 语言或插件 修饰符 说明
1 正则表达式 g 可以查找字符串中所有的匹配项
2 正则表达式 i 不区分大小写匹配
3 正则表达式 m 可以使^和$匹配一段文本中每行的开始和结束位置。 g只匹配第一行,添加m之后实现多行。 以下实例字符串中使用\n来换行
4 正则表达式 s 默认情况下的圆点 . 是 匹配除换行符\n之外的任何字符,加上s之后,.中包含换行符\n

【保留纯数字正则表达式解析】

image.png

'a1b2c3d'.replace(/[^\d]/g, "")

1)//g,为正则表达式写法之一,g是修饰符,全匹配<br/>
2)//i,如果不加修饰符,那么结果如下<br/>
只清匹配清除了第一个<br/>
image.png

3)中阔号[] <br/>
匹配中括号内的字符中的任意一个,比如:清除字符串中有abc字符<br/>
'a1b2c3d'.replace(/[abc]/g, "")

image.png

4)^符号,以紧挨的元素开头<br/>
相反的符号是$,以紧挨的元素结尾<br/>
5)\d,匹配一个数字,0-9 <br/>
6)组合理解,1 <br/>
匹配与数字靠近的字符 <br/>

image.png

【保留1位小数点】

a13.215.5.55.'.replace(/[^\d\.]/g, "").replace('.', "@#@").replace(/[\.]/g, "").replace('@#@', ".")

image.png

通过上面正则表达式的分析,实现保留2位小数,这里用到了一个小技巧<br/>
1)实现保留1位小数点<br/>
2)既然是小数,那么就会有小数点符号<br/>
3)表达式:replace(/2/g, "") <br/>
清除非数字和小数点的符号
4)表达式:replace('.', "@#@") <br/>
先将第一个小数点使用符号进行占位代替
5)表达式:.replace(/[.]/g, "") <br/>
匹配字符串中有小数点的去掉
6)表达式,.replace('@#@', ".") <br/>
最后再将占位符替换回来小数点

【保留2位小数点】

通过上面步骤清除非数字和小数点后,就可以使用下面表达式保留小数点位数了

'132.25545'.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')

image.png

1)$1$2.$3,表示匹配出对应的第一、第二、第三个表达式 <br/>
2)如果想保留1位小数,那么第三个表达式改为:(\d) <br/>

image.png


  1. \d
  2. \d.
相关文章
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
185 3
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
129 1
|
JavaScript 数据安全/隐私保护
jQuery Password Validation(密码验证)
jQuery Password Validation(密码验证)
124 3
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
2298 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
133 2
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
170 13
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
650 0
|
存储 前端开发 搜索推荐
Web前端网站(一) - 登录页面及账号密码验证
页面背景动态是烟花和文字特效与缓缓下落的雪花相结合,在登录表单的旁边还有五个白色光圈以不规则的方式环绕,当鼠标靠近时,会发出彩色的光芒~~~
273 1
Web前端网站(一) - 登录页面及账号密码验证
|
前端开发 开发者 UED
数据校验的艺术:揭秘JSF如何将前端与后端验证合二为一,打造无缝用户体验
【8月更文挑战第31天】JavaServer Faces(JSF)是构建企业级Web应用的Java规范,提供了丰富的组件和API,便于快速搭建用户界面。JSF验证框架基于JavaBean验证API(JSR 303/JSR 380),利用注解如`@NotNull`、`@Size`等在模型类上定义验证规则,结合前端的`&lt;h:inputText&gt;`和`&lt;h:message&gt;`标签展示错误信息。
192 0

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 10
    拿下奇怪的前端报错(三):npm install卡住了一个钟- 从原理搞定安装的全链路问题