jsp注册里密码强弱怎么弄_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实现判断密码强度并用进度条样式进行提示强度是否符合

先编写界面代码：

然后在vue的data中定义需要用到的变量，编写并绑定密码和再次输入密码框的验证规则函数

data(){

const validatepassword = (rule, value, callback) => {

if (value === '') {

callback(new error('请输入密码'));

} else {

//6-20位包含字符、数字和特殊字符

var ls = 0;

if (this.registerformdata.password !== '') {

if(this.registerformdata.password.match(/([a-z])+/)){

ls++;

}

if(this.registerformdata.password.match(/([0-9])+/)){

ls++;

}

if(this.registerformdata.password.match(/([a-z])+/)){

ls++;

}

if(this.registerformdata.password.match(/([\w])+/) && !this.registerformdata.password.match(/(![\u4e00-\u9fa5])+/)){ ls++;

}

if(this.registerformdata.password.length<6 || this.registerformdata.password.length>20 ){

callback(new error('要求6-20位字符'));

ls=0;

}

if(this.registerformdata.password.match(/([\u4e00-\u9fa5])+/)){

callback(new error('不能包含中文字符'));

ls=0;

}

switch (ls) {

case 0: this.passwordpercent = 0;callback(new error('数字、小写字母、大写字母以及特殊字符中四选三'));break;

case 1: this.passwordpercent = 33;callback(new error('数字、小写字母、大写字母以及特殊字符中四选三'));break;

case 2: this.passwordpercent = 66;callback(new error('数字、小写字母 、大写字母以及特殊字符中四选三'));break;

case 3:

case 4: this.passwordpercent = 100;break;

default: this.passwordpercent = 0;break;

}

}

callback();

}

};

const validateconfirmpassword = (rule, value, callback) => {

if (value === '') {

callback(new error('请输入密码'));

} else {

if (this.registerformdata.comfirmpassword !== this.registerformdata.password) {

callback(new error('两次输入的密码不一致'));

// this.$refs.ruleform.validatefield('checkpass');

}

callback();

}

};

return{

passwordpercent:0,

//表单变量

registerformdata: {

password:'',

comfirmpassword: '',

},

formlabelwidth: '120px'

},

rules: {

password:[

{required: true, validator: validatepassword, trigger: ['blur', 'change'] },

],

comfirmpassword:[

{required: true, validator: validateconfirmpassword, trigger: ['blur', 'change'] }

],

},

}

接着编写，elementui中的进度条判断函数，即这句界面代码中format绑定的函数

passwordpercentformat(percentage){

return percentage === 100 ? '符合' : `不符`;

}

最后可以通过css调整一下输入框的长度

.el-form-item{

width: 500px;

}

这样就可以实现使用进度条提示密码强度的效果

附上：

判断字符串是否符合手机号码规范/^1[34578]\d{9}$/

ps：下面给大家分享vue + elementui 实现密码校验

data() {

var validatepass2 = (rule, value, callback) => {

if (value === '') {

callback(new error('请再次输入密码'))

} else if (value !== this.info.password) {

callback(new error('两次输入密码不一致!'))

} else {

callback()

}

}

return {

info: {

},

rules: {

password: [

{ required: true, message: '请输入密码', trigger: 'blur' },

{ pattern: /^(?![a-za-z]+$)(?![a-z0-9]+$)(?![a-z\w_]+$)(?![a-z0-9]+$)(?![a-z\w_]+$)(?![0-9\w_]+$)[a-za-z0-9\w_]{8,30}$/, message: '密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 8 - 30位，密码不能包含 用户名，公司名称(lidian), 公司域名(rekoon) (判断的时候不区分大小写)' }

],

repassword: [

{ required: true, validator: validatepass2, trigger: 'blur' }

]

}

}

},

总结

以上所述是小编给大家介绍的vue.js+elementui实现进度条提示密码强度效果，希望对大家有所帮助

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！