您好,登錄后才能下訂單哦!
要求一:判斷輸入的字符串是否包含數(shù)字、小寫字母、大寫字母以及特殊字符四種內(nèi)容的8-20位字符
通過搜索了解到可以使用?=這個(gè)正則語(yǔ)法判斷字符串中是否含有多種內(nèi)容。(?=)這個(gè)語(yǔ)法結(jié)構(gòu)在正則里表示“設(shè)定后面是”的意思,舉下面幾個(gè)例子進(jìn)一步了解?=這個(gè)語(yǔ)法:
(?=.*[a-zA-Z]) 這句的意思就是后面必須有一位大寫或小寫字母
(?=.*[1-9]) 這句的意思是后面必須有一位數(shù)字
(?=.*[\W]) 這句的意思是后面必須有一個(gè)非字母數(shù)字及下劃線的特殊符號(hào)
(?!.*[\u4E00-\u9FA5]) 這句的意思是后面不能有漢字
. 表示匹配除“\n”之外的任何單個(gè)字符。若要匹配包括“\n”在內(nèi)的任意字符,請(qǐng)使用諸如“[\s\S]”之類的模式。
* 表示零次或多次匹配前面的字符或子表達(dá)式。例如,to* 匹配“t”和“too”。* 等效于 {0,}。
得出正則表達(dá)式:(?=.*[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) 判斷即可
要求二:判斷輸入的字符串是否包含數(shù)字、小寫字母、大寫字母以及特殊字符四種中至少三種的8-20位字符
本次使用vue.js+ElementUI實(shí)現(xiàn)判斷密碼強(qiáng)度并用進(jìn)度條樣式進(jìn)行提示強(qiáng)度是否符合
先編寫界面代碼:
<div> <el-form :model="registerFormData" ref="registerForm" :rules="rules"> <el-form-item label="密碼" :label-width="formLabelWidth" prop="password"> <el-input show-password type="password" v-model="registerFormData.password" autocomplete="off" placeholder="8-20位字符在數(shù)字、小寫、大寫字母以及特殊字符中四選三"></el-input> <el-progress :percentage="passwordPercent" :format="passwordPercentFormat"></el-progress> </el-form-item> <el-form-item label="再次輸入密碼" :label-width="formLabelWidth" prop="comfirmPassword"> <el-input v-model="registerFormData.comfirmPassword" autocomplete="off"></el-input> </el-form-item> </el-form> </div>
然后在vue的data中定義需要用到的變量,編寫并綁定密碼和再次輸入密碼框的驗(yàn)證規(guī)則函數(shù)
data(){ const validatePassword = (rule, value, callback) => { if (value === '') { callback(new Error('請(qǐng)輸入密碼')); } else { //6-20位包含字符、數(shù)字和特殊字符 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('數(shù)字、小寫字母、大寫字母以及特殊字符中四選三'));break; case 1: this.passwordPercent = 33;callback(new Error('數(shù)字、小寫字母、大寫字母以及特殊字符中四選三'));break; case 2: this.passwordPercent = 66;callback(new Error('數(shù)字、小寫字母 、大寫字母以及特殊字符中四選三'));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('請(qǐng)輸入密碼')); } 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中的進(jìn)度條判斷函數(shù),即<el-progress :percentage="passwordPercent" :format="passwordPercentFormat">這句界面代碼中format綁定的函數(shù)
passwordPercentFormat(percentage){ return percentage === 100 ? '符合' : `不符`; }
最后可以通過css調(diào)整一下輸入框的長(zhǎng)度
<style scoped> .el-form-item{ width: 500px; } </style>
這樣就可以實(shí)現(xiàn)使用進(jìn)度條提示密碼強(qiáng)度的效果
附上:
判斷字符串是否符合手機(jī)號(hào)碼規(guī)范/^1[34578]\d{9}$/
ps:下面給大家分享vue + elementUi 實(shí)現(xiàn)密碼校驗(yàn)
<el-form-item v-else label="密碼" label-width='150px' prop="password"> <el-input :placeholder="info.password" v-model="info.password" ></el-input> </el-form-item> <el-form-item v-else label="確認(rèn)密碼" label-width='150px' prop="repassword"> <el-input :placeholder="info.repassword" v-model="info.repassword" ></el-input> </el-form-item> data() { var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('請(qǐng)?jiān)俅屋斎朊艽a')) } else if (value !== this.info.password) { callback(new Error('兩次輸入密碼不一致!')) } else { callback() } } return { info: { }, rules: { password: [ { required: true, message: '請(qǐng)輸入密碼', 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: '密碼為數(shù)字,小寫字母,大寫字母,特殊符號(hào) 至少包含三種,長(zhǎng)度為 8 - 30位,密碼不能包含 用戶名,公司名稱(lidian), 公司域名(rekoon) (判斷的時(shí)候不區(qū)分大小寫)' } ], repassword: [ { required: true, validator: validatePass2, trigger: 'blur' } ] } } },
總結(jié)
以上所述是小編給大家介紹的vue.js+ElementUI實(shí)現(xiàn)進(jìn)度條提示密碼強(qiáng)度效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。