【前端】使用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.
相关文章
|
14天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
26 3
|
1月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
28 1
|
1月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
91 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
1月前
|
JavaScript 数据安全/隐私保护
jQuery Password Validation(密码验证)
jQuery Password Validation(密码验证)
26 3
|
2月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
26 2
|
1月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
56 0
|
3月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
3月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
57 13
|
3月前
|
前端开发 开发者 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;`标签展示错误信息。
40 0
|
3月前
|
前端开发 数据库 Python
中后台前端开发问题之验证用户提供的uid和token的有效性如何解决
中后台前端开发问题之验证用户提供的uid和token的有效性如何解决
19 0