<>强要求一:判断输入的字符串是否包含数字,小写字母、大写字母以及特殊字符四种内容的8-20位字符
通过搜索了解到可以使用& # 63;=这个正则语法判断字符串中是否含有多种内容。(& # 63;=)这个语法结构在正则里表示“设定后面是”的意思,举下面几个例子进一步了解& # 63;=这个语法:
(& # 63;=? [a-zA-Z]),,这句的意思就是后面必须有一位大写或小写字母
(& # 63;=?(1 - 9))这句的意思是后面必须有一位数字
(& # 63;=? [\ W])这句的意思是后面必须有一个非字母数字及下划线的特殊符号
(& # 63; ! * [\ u4E00 - \ u9FA5])这句的意思是后面不能有汉字
。表示匹配除“\ n”之外的任何单个字符。若要匹配包括在“\ n”内的任意字符,请使用诸如“[\ s \ s]”之类的模式。
*表示零次或多次匹配前面的字符或子表达式。例如,*匹配“t”和“太”。*等效于{0}。
得出正则表达式:(& # 63;=? [a - z]) (& # 63;=? [a - z]) (& # 63;=? (1 - 9)) (& # 63;=? [\ W]) (& # 63; ! * [\ u4E00 - \ u9FA5])。{8、20}
使用if (value.match (/(& # 63;=? [a - z]) (& # 63;=? [a - z]) (& # 63;=? (1 - 9)) (& # 63;=? [\ W]) (& # 63; ! * [\ u4E00 - \ u9FA5])。{8、20}/)==null)判断即可
<>强要求二:判断输入的字符串是否包含数字,小写字母、大写字母以及特殊字符四种中至少三种的8-20位字符
本次使用vue.js + ElementUI实现判断密码强度并用进度条样式进行提示强度是否符合
先编写界面代码:
& lt; div>
& lt; el-form:模型=" registerFormData " ref=皉egisterForm”:规则=肮嬖颉北?
& lt; el-form-item标签="密码”:label-width=癴ormLabelWidth”道具=懊苈搿北?
& lt; el-input show-password type=v模型=" registerFormData“密码”。密码“自动完成=" "占位符=" 8-20位字符在数字,小写,大写字母以及特殊字符中四选三”祝辞& lt;/el-input>
& lt; el-progress:比例=" passwordPercent”:格式=皃asswordPercentFormat祝辞& lt;/el-progress>
& lt;/el-form-item>
& lt; el-form-item标签="再次输入密码”:label-width=癴ormLabelWidth”道具=癱omfirmPassword”比;
& lt; el-input v模型=自动完成“registerFormData.comfirmPassword”=肮乇铡弊４? lt;/el-input>
& lt;/el-form-item>
& lt;/el-form>
& lt;/div>
然后在vue的数据中定义需要用到的变量,编写并绑定密码和再次输入密码框的验证规则函数
数据(){
const validatePassword=(规则,价值,回调)=比;{
如果(值=https://www.yisu.com/zixun/==? {
回调(新的错误(“请输入密码'));
其他}{//6 20位包含字符,数字和特殊字符
var ls=0;
如果(this.registerFormData。密码!==?{
如果(this.registerFormData.password.match (/([a - z]) +/)) {
ls + +;
}
如果(this.registerFormData.password.match (/([0 - 9]) +/)) {
ls + +;
}
如果(this.registerFormData.password.match (/([a - z]) +/)) {
ls + +;
}
如果(this.registerFormData.password.match (/((\ W) +/),,! this.registerFormData.password.match (/(! [\ u4E00 - \ u9FA5]) +/)) {ls + +;
}
如果(this.registerFormData.password.length<6 | | this.registerFormData.password.length> 20) {
回调(新的错误(“要求6 20位字符'));
ls=0;
}
如果(this.registerFormData.password.match (/((\ u4E00 - \ u9FA5)) +/)) {
回调(新的错误(“不能包含中文字符'));
ls=0;
}
开关(ls) {
例0:这个。passwordPercent=0;回调(新的错误(“数字,小写字母、大写字母以及特殊字符中四选三”));断裂;
案例1:这个。passwordPercent=33;回调(新的错误(“数字,小写字母、大写字母以及特殊字符中四选三”));断裂;
案例2:这个。passwordPercent=66;回调(新的错误(“数字,小写字母、大写字母以及特殊字符中四选三”));断裂;
案例3:
案例4:这个。passwordPercent=100;断裂;
默认值:。passwordPercent=0;断裂;
}
}
回调();
}
};
const validateConfirmPassword=(规则,价值,回调)=比;{
如果(值=https://www.yisu.com/zixun/==? {
回调(新的错误(“请输入密码'));
其他}{
如果(this.registerFormData.comfirmPassword !==this.registerFormData.password) {
回调(新的错误(“两次输入的密码不一致'));//这个。美元refs.ruleForm.validateField (“checkPass”);
}
回调();
}
};
返回{
passwordPercent: 0,//表单变量
registerFormData: {
密码:”,
comfirmPassword:”,
},
formLabelWidth:“120 px”
},
规则:{
密码:(
{要求:真的,验证器:validatePassword,触发:[‘模糊’,‘改变’]},
),
comfirmPassword:(
{要求:真的,验证器:validateConfirmPassword,触发:[‘模糊’,‘改变’]}
),
},
}
