菜鸟前端开发之正则校验

作为一个后台开发的菜菜鸟，刚入工作一个月(实习期)竟然让写前端校验，啥都没学过，怎么搞，瞎搞呗。

目录

一、常见正则表达式

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-input
	  v-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)。