vue.js+ElementUI实现进度条提示密码强度效果-创新互联

要求一：判断输入的字符串是否包含数字、小写字母、大写字母以及特殊字符四种内容的8-20位字符

通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容。(?=)这个语法结构在正则里表示“设定后面是”的意思，举下面几个例子进一步了解?=这个语法：

(?=.*[a-zA-Z])  这句的意思就是后面必须有一位大写或小写字母

(?=.*[1-9]) 这句的意思是后面必须有一位数字

(?=.*[\W]) 这句的意思是后面必须有一个非字母数字及下划线的特殊符号

(?!.*[\u4E00-\u9FA5]) 这句的意思是后面不能有汉字

. 表示匹配除“\n”之外的任何单个字符。若要匹配包括“\n”在内的任意字符，请使用诸如“[\s\S]”之类的模式。

* 表示零次或多次匹配前面的字符或子表达式。例如，to* 匹配“t”和“too”。* 等效于 {0,}。

得出正则表达式：(?=.*[a-z])(?=.*[A-Z])(?=.*[1-9])(?=.*[\W])(?!.*[\u4E00-\u9FA5]).{8,20}

使用if (value.match(/(?=.*[a-z])(?=.*[A-Z])(?=.*[1-9])(?=.*[\W])(?!.*[\u4E00-\u9FA5]).{8,20}/)==null) 判断即可

要求二：判断输入的字符串是否包含数字、小写字母、大写字母以及特殊字符四种中至少三种的8-20位字符

本次使用vue.js+ElementUI实现判断密码强度并用进度条样式进行提示强度是否符合

先编写界面代码：