菜鸟前端开发之正则校验
作为一个后台开发的菜菜鸟,刚入工作一个月(实习期)竟然让写前端校验,啥都没学过,怎么搞,瞎搞呗。
目录
一、常见正则表达式
1、数字
2、字符串
3、其他
二、数字案例
1、页面
2、逻辑处理
快乐,真快乐! 开心,真开心!
先不废话了,常见的正则先放着大家随便看看吧(肯定不全,有的也没有测试过)。
一、常见正则表达式
1、数字
验证n位的数字:^\d{n}$
验证至少n位数字:^\d{n,}$
验证m-n位的数字:^\d{m,n}$
验证零和非零开头的数字:^(0|[1-9][0-9]*)$
验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$
验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$
验证非零的正整数:^\+?[1-9][0-9]*$
验证非零的负整数:^\-[1-9][0-9]*$
验证非负整数(正整数 + 0) ^\d+$
验证非正整数(负整数 + 0) ^((-\d+)|(0+))$
整数:^-?\d+$
非负浮点数(正浮点数 + 0):^\d+(\.\d+)?$
正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
非正浮点数(负浮点数 + 0) ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数 ^(-?\d+)(\.\d+)?$
2、字符串
验证由26个英文字母组成的字符串:^[A-Za-z]+$
验证由26个大写英文字母组成的字符串:^[A-Z]+$
验证由26个小写英文字母组成的字符串:^[a-z]+$
验证由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$
验证由数字、26个英文字母或者下划线组成的字符串:^\w+$
3、其他
验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为:以字母开头,长度在6-18之间,只能包含字符、数字和下划线。
验证是否含有 ^%&',;=?$\" 等字符:[^%&',;=?$\x22]+
验证汉字:^[\u4e00-\u9fa5],{0,}$
验证Email地址:^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
验证InternetURL:^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ;^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
验证长度为3的字符:^.{3}$
验证身份证号(15位或18位数字):^\d{15}|\d{}18$
二、数字案例
以自己经历在这随便画画,这是一个关于排序的问题,本应设计的是输入,然后测试大大在输入框输入表情,各种字符等等,引发一系列菜菜鸟的操作,瞎搞,胡搞,乱搞,最后是解决了(最关键是有一个奇奇怪怪的数字或者是字母,那就e)
1、页面
注意form表单
:rules="rules"<el-form-item label="排序:" prop="rotationOrder"><el-inputv-model="ruleForm.rotationOrder" placeholder="请输入排序" @input="check" type="number"></el-input>
</el-form-item>
2、逻辑处理
data(){
rules: {uploadDis: [{required: true,message: '请输入排序',trigger: 'blur' },]}
}methods: {
check(e){let value = e.replace(/^(0+)|[^\d]+/g,''); //以0开头或者输入非数字,会被替换成空this.ruleForm.rotationOrder = value;}
}
这里应该有一个存在未处理的bug,菜菜鸟最后最后完善的,直接使用计数器,并且限制了大小,bug就是如果排序里面输入e,会有问题的,e真是一个神奇的字母啊或者数字(hei tui)。
菜鸟前端开发之正则校验相关推荐
- h5前端开发常用的校验正则表达式
正则表达式 非原创,引用地址:来自 www.okajax.com/a/201605/re- 前端开发中经常使用到的20个正则表达式. 校验密码强度 密码的强度必须是包含大小写字母和数字的组合,不能使用 ...
- 2020前端最新面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)(3年前端菜鸟级开发师含泪总结)
2020前端最新面试题总结(js.html.小程序.React.ES6.Vue.算法.全栈热门视频资源) 文档描述 (今年确实挺难 3年前端菜鸟级开发师含泪总结 希望能帮助大家) 本文是关注微信小程序 ...
- 零基础转行Web前端开发自学靠谱吗?菜鸟学习前端的方法分享
Web 前端开发行业长期处于供不应求的状态,薪资待遇也随之水涨船高,因此吸引了不少零基础转业者.那么,可能会有人问了:零基础转行Web 前端开发自学靠谱吗?这个问题没有确切的答案,毕竟每个人的情况都不 ...
- 菜鸟写jquery入门教程(for web前端开发群4)(01)
呃,大概是这样,碰到一笨学生, 并鉴于群里有这么多人在学jquery,好吧.既然大家都懒得去看帮助,我来开篇写点什么吧. JQuery 起源 ? 这个没必要介绍了,各位可以去百度一下.谈谈个人对JQ ...
- 一只小菜鸟的web前端开发自学之路
今天初步了解了一下Web前端开发,计算机技术这东西就要多用多练,一只菜的不能再菜的小菜鸟开始漫长的自学之路了 web系统前端是指系统中用户接触到的部分. 打开几个不同网站的网页,观察一下,有网页文件的 ...
- 20个正则表达式必知(前端开发)
正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. 列目录时, dir .tx ...
- 前端开发规范V2023.5
前端开发规范 本文档适用于所有前端项目的开发,为了方便开发团队和个人统一规范风格而作.文档中包含了开发中需要注意的事项以及参考建议,本文档不单是一篇规范要求,同时也是前端开发手册,当你不知如何做比较好 ...
- Java 正则校验手机号 工具类
List: 1.需求 2.代码 3.总结 --1.需求-- 前后台分离开发,就需要对传参的数据进行校验,你不知道前端会给你传过来什么乱七八糟的数据,如果在后面的逻辑里面出错了.那就是你后端的问题了.所 ...
- 前端开发体系建设日记
前端开发体系建设日记 · Issue #2 · fouber/blog https://github.com/fouber/blog/issues/2 上周写了一篇 文章 介绍前端集成解决方案的基本理 ...
最新文章
- python 和 torch 交叉熵损失
- Oracle 删除归档日志脚本
- webpack window 添加第三方库
- matlab---spectrogram短时傅里叶变换与chrip信号
- dcase_util教程(二)——各单元介绍
- 【基础】有关T-SQL的10个好习惯
- win10怎么设置默认输入法_win10系统输入法失效打不了字怎么办
- 7天减排超万吨 特斯拉十一出行报告带来纯电出行全新视角
- sharepoint SSP(shared services providers ) 配置
- Microsoft Visual C++ 14.0 is required. Get it with “Microsoft Visual C++ Build Tools”:报错解决
- android 自定义 对号,超简单实现Android自定义Toast
- python中的f的用法_python中f是什么
- 小学教师评职称计算机考试题,中小学美术教师职称晋升招聘考试题库(含答案)1...
- 信息化项目WBS实战总结
- 细菌觅食算法(Bacteria Foraging Algorithm,BFA)
- CoreJava(第二章)Java基础
- 潦草字体在线识别_连笔字在线生成器
- python坐标轴刻度设置_Python Matplotlib 设置x/y坐标轴刻度
- CSE105 Coursework
- Firewald防火墙