【VUE+Elemet 】最全正则验证 + 表单验证 + 注意事项

一、正则验证

1.输入字母/数字/下划线：

2.请输入中英文/数字/下划线：

3.请输入中文/英文：

4.规范金额：

5.用户名不能全是数字:

6.中文：

7.非中文：

8.限制长度：

9.数字：

10.正整数及整数：

11.请输入数字(可正负)

12.请输入数字/小数点:

13.请输入0-9999

14.大写，小写，数字，特殊字符，至少上面的三种,至少八位

15.自定义校验

16.是否合法IP地址:

17.是否手机号码或者固话

18.是否身份证号码

19.是否邮箱

20.大/小写字母

21.大小写混合

22.多个8位数字格式(yyyyMMdd)并以逗号隔开

23.数字加英文，不包含特殊字符

24前两位是数字后一位是英文

25.密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）

二、JS单使用正则

1.小数点后只能有两位数(可为0)

2.登录验证(包含字符验证和长度验证)：

3.密码正则:

4.身份证号码正则表达式：

5.QQ号码正则:

6.微信号码正则:

7.特殊字符检测正则:

8.域名正则:

9.车牌号码正则:

10.包含中文正则:

11.护照正则:

12.固定电话正则：

13.IP地址正则:

14.邮政编码正则:

15.经纬度正则

16.判断字符串长度区分中英文

17. js输入1到120的整数文

18.js 1-50

三、表单验证

请注意此数字验证有四个坑：

数字验证另一种写法（正则）：

element清空表单(全局)：

demo

邮箱

扩展功能1

扩展功能2

禁止输入空格

一、正则验证

1.输入字母/数字/下划线：

{ pattern:/^\w+$/, message: '请输入字母/数字/下划线', trigger: 'blur' },

2.请输入中英文/数字/下划线：

{ pattern:/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/, message: '请输入中英文/数字/下划线', trigger: 'blur' },

3.请输入中文/英文：

{pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/,message: '请输入中文/英文',trigger: 'blur'},

4.规范金额：

pattern: /(^[\d]|^[1-9][\d]*)($|[\.][\d]{0,2}$)/,

5.用户名不能全是数字:

{ pattern:/[^\d]/g, message: '用户名不能全是数字', trigger: 'blur' },

6.中文：

{ pattern:/^[\u4e00-\u9fa5]+$/, message: '请输入中文', trigger: 'blur' },

7.非中文：

/^[^\u4e00-\u9fa5]*$/

8.限制长度：

{ pattern:/^\d{1,20}$/, message: '长度在 1 到 20 个字符', trigger: 'blur' }

9.数字：

/^[0-9]*$/

{ pattern:/^\d+$/, message: '请输入数字', trigger: 'blur' },

10.正整数及整数：

pattern: /^[1-9]\d*$/

pattern:/^-?[1-9]\d*$/,

11.请输入数字(可正负)

{ pattern:/^(\-|\+)?\d+(\.\d+)?$/, message: '请输入数字(可正负)', trigger: 'blur' },

/^-[0-9]*[1-9][0-9]*$/

12.请输入数字/小数点:

{pattern: /^\d+$|^\d*\.\d+$/,message: '请输入数字/小数点',trigger: 'blur'},

13.请输入0-9999

data() {var validatew01014_Max = (rule, value, callback) => {var reg= /^(\d|[1-9]\d|9999)(\.\d{1,2})?$/if(!reg.test(Number(value))) {callback(new Error('范围在0-9999'));}else {callback();}};return {form: {w01014_Max: "",},rules: {w01014_Max: [{required: true,message: '请输入直饮水电导率最大值',trigger: 'blur'},{ pattern:/^\d+$|^\d*\.\d+$/, message: '请输入数字/小数点', trigger: 'blur' },{required: true,validator: validatew01014_Max,trigger: 'blur'},],},};},

14.大写，小写，数字，特殊字符，至少上面的三种,至少八位

{pattern: /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/,message: '请输入大/小写字母+数字+特殊字符',trigger: 'blur'},

15.自定义校验

{validator: function (rule, value, callback) {if (value == '测试') {callback(new Error('名字不能是测试!'))} else {callback()}}}

16.是否合法IP地址:

pattern:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,

17.是否手机号码或者固话

pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,

18.是否身份证号码

pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,

19.是否邮箱

pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,

20.大/小写字母

pattern:/^[a-z]+$/,pattern:/^[A-Z]+$/,

21.大小写混合

pattern:/^[A-Za-z]+$/,

22.多个8位数字格式(yyyyMMdd)并以逗号隔开

pattern:/^\d{8}(\,\d{8})*$/,

23.数字加英文，不包含特殊字符

pattern:/^[a-zA-Z0-9]+$/,

24前两位是数字后一位是英文

pattern:/^\d{2}[a-zA-Z]+$/,

25.密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）

pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,

二、JS单使用正则

1.小数点后只能有两位数(可为0)

var reg= /^(-?\d+)(\.\d{1,2})?$/
if(reg.test("12"))
{
alert("符合要求");
}

2.登录验证(包含字符验证和长度验证)：

      if (this.username == "") {this.dialog = "请输入用户名/手机号";return false;}var reg1= /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/if(!reg1.test(this.username)) {this.dialog = "用户名/手机号请输入中英文/数字/下划线";return false;} var reg2= /^.{1,50}$/if(!reg2.test(this.username)) {this.dialog = "用户名/手机号长度在 1 到 50 个字符";return false;} if (this.password == "") {this.dialog = "请输入密码";return false;} var reg3= /^[a-zA-Z0-9_]*$/if(!reg3.test(this.password)) {this.dialog = "密码请输入字母/数字/下划线";return false;}var reg4= /^.{6,24}$/if(!reg4.test(this.password)) {this.dialog = "密码长度在 6 到 24 个字符";return false;}

3.密码正则:

密码正则，以字母开头，长度在6~18之间，只能包含字母、数字和下划线

let isTrue =^[a-zA-Z]\w{5,17}$;

强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)

var pwd = /^(?=.\d)(?=.[a-z])(?=.[A-Z]).{8,10}$/

强密码正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符

let isTrue = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

4.身份证号码正则表达式：

第一代身份证只有15位数，第二代身份证有18位数，各位按照需求来选择表达式。

//第二代身份证号码正则let isTrue = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;//第一代身份证正则表达式(15位)let isTrue=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;

5.QQ号码正则:

let isTrue = /^[1-9][0-9]{4,10}$/;

6.微信号码正则:

//微信号正则，6至20位，以字母开头，字母，数字，减号，下划线
let isTrue = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;

7.特殊字符检测正则:

1.个人认为不全，推荐2

   let isTrue= /["'<>%;)(&+]+-!！@#$~/;

var str= /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/im; if (str.test(this.value)) {uni.showToast({title: '昵称不能包含特殊字符',icon: 'none',duration: 1000});return false;}

8.域名正则:

let isTrue=[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?;

9.车牌号码正则:

let isTrue = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;

10.包含中文正则:


let isTrue = /[\u4E00-\u9FA5]/;//这个可以用于验证用户的真实姓名。

11.护照正则:

let isTrue=/^(P\d{7}|G\d{7,8}|TH\d{7,8}|S\d{7,8}|A\d{7,8}|L\d{7,8}|\d{9}|D\d+|1[4,5]\d{7})$/;

12.固定电话正则：

let isTrue=(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8};

13.IP地址正则:

let isTrue=\d+\.\d+\.\d+\.\d+;

14.邮政编码正则:

let isTrue=[1-9]{1}(\d+){5};

15.经纬度正则


//经度正则let isTrue=/^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;//纬度正则let isTrue=/^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;

16.判断字符串长度区分中英文

写法一

let nameLong = this.nameValue.replace(/[\u0391-\uFFE5]/g, 'aa').length
if (nameLong > 10) {this.$toasts("不超过10个字符")return false
}

写法二

export default {data() {let validcodeName=(rule,value,callback)=>{//替换双字节汉字，为aa,限制输入框长度；if(value.replace(/[^\x00-\xff]/g, "aa").length>=24){callback(new Error('长度在1到12汉字'))}else{callback()}};return {popFormRules: {Name:[{type: 'string',required: true,message: '请输入名称',trigger: 'blur,change'}, {validator:validcodeName,trigger: 'blur'}],}}}
},

17. js输入1到120的整数文

eg = /^[0-9]\d?$|^1[01]\d$|^120$/;
console.log(reg.test(0));  //true

18.js 1-50

/^\S{1,50}$/

三、表单验证

请注意此数字验证有四个坑：

1、注意写法：v-model.number="form.phone"

2、js给数字验证长度与其他不同，必须使用正则：{ pattern:/^\d{1,20}$/, message: '长度在 1 到 20 个字符', trigger: 'blur' }

3、数字的值其实是int型，注意回显的转换，及传参的转换！（如果回显不转换的话，会一直报错！）

数字验证另一种写法（正则）：

1、{ pattern:/^(\-|\+)?\d+(\.\d+)?$/, message: '请输入数字(可正负)', trigger: 'blur' },

element清空表单(全局)：

1、this.$refs.form.resetFields();

demo

<el-form ref="form" :rules="rules" :model="form" label-width="150px"><el-form-item label="用户名：" prop="username"><el-input placeholder="请输入用户名" v-model="form.username" style="width:300px;"></el-input></el-form-item><el-form-item label="姓名：" prop="name"><el-input placeholder="请输入姓名" v-model="form.name" style="width:300px;"></el-input></el-form-item><el-form-item label="角色名称：" prop="role"><el-select v-model="form.role" style="width:300px;"><el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id"></el-option></el-select></el-form-item><el-form-item label="手机号/账号：" prop="phone"><el-input v-model.number="form.phone" style="width:300px;"></el-input></el-form-item><el-form-item v-if="isAdd" label="密码：" prop="pass"><el-input v-model="form.pass" style="width:300px;"></el-input></el-form-item><el-form-item label="邮箱：" prop="emall"><el-input v-model="form.emall" style="width:300px;"></el-input></el-form-item><el-form-item label="请选择组织：" prop="organization"><el-select v-model="form.organization" style="width:300px;"><el-option v-for="item in organizations" :key="item.orgId" :label="item.orgName" :value="item.orgId"></el-option></el-select></el-form-item><el-form-item><el-button @click="onCancle">取 消</el-button><el-button type="primary" @click="onSubmit('form')">确 定</el-button></el-form-item></el-form>

form: {username: "",name: "",role: "",phone: "",pass: "",emall: "",organization: "",},rules: {username: [{required: true,message: '请输入用户名',trigger: 'blur'},{min: 1,max: 50,message: '长度在 1 到 50 个字符',trigger: 'blur'}],name: [{required: true,message: '请输入姓名',trigger: 'blur'},{min: 1,max: 50,message: '长度在 1 到 50 个字符',trigger: 'blur'}],role: [{required: true,message: '请选择角色名称',trigger: 'change'}],phone:[{ required: true, message: '手机号/账号不能为空',trigger: 'blur'},{ type: 'number', message: '手机号/账号必须为数字',trigger: 'blur'},{ pattern:/^\d{1,20}$/, message: '长度在 1 到 20 个字符', trigger: 'blur' }],pass: [{required: true,message: '请输入密码',trigger: 'blur'},{min: 6,max: 24,message: '长度在 6 到 24 个字符',trigger: 'blur'}],emall: [{required: true,message: '请输入邮箱',trigger: 'blur'},{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },{min: 6,max: 50,message: '长度在 6 到 50 个字符',trigger: 'blur'}],organization: [{required: true,message: '请选择所属组织',trigger: 'change'}],},

//添加/修改onSubmit(form) {this.$refs[form].validate((valid) => {if (valid) {if (this.isAdd) {this.addPeopleLink();} else {this.changePeopleLink();}} else {return false;}});},

邮箱

<el-form-item label="邮箱：" prop="email"><el-input v-model.trim="form.email" style="width:300px;"></el-input>
</el-form-item>var checkEmail = (rule, value, callback) => {const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/if (!value) {return callback(new Error('邮箱不能为空'))}setTimeout(() => {if (mailReg.test(value)) {callback()} else {callback(new Error('请输入正确的邮箱格式'))}}, 100)}email: [{validator: checkEmail,trigger: 'blur'}],

扩展功能1

回车事件 @keyup.enter="submit"

扩展功能2

禁止输入空格

v-model.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符