elementui进度条如何设置_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實現進度條提示密碼強度效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
總結
以上是生活随笔為你收集整理的elementui进度条如何设置_vue.js+ElementUI实现进度条提示密码强度效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： kali如何制作php字典_Kali L
- 下一篇： html5倒计时秒杀怎么做,vue 设