vue.js+ElementUI實現(xiàn)進度條提示密碼強度效果

更新時間：2020年01月18日 11:41:48 作者：WEN_Windy

這篇文章主要介紹了vue.js+ElementUI實現(xiàn)進度條提示密碼強度效果,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下

要求一：判斷輸入的字符串是否包含數(shù)字、小寫字母、大寫字母以及特殊字符四種內(nèi)容的8-20位字符

通過搜索了解到可以使用?=這個正則語法判斷字符串中是否含有多種內(nèi)容。(?=)這個語法結(jié)構(gòu)在正則里表示“設(shè)定后面是”的意思，舉下面幾個例子進一步了解?=這個語法：

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

(?=.*[1-9]) 這句的意思是后面必須有一位數(shù)字

(?=.*[\W]) 這句的意思是后面必須有一個非字母數(shù)字及下劃線的特殊符號

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

. 表示匹配除“\n”之外的任何單個字符。若要匹配包括“\n”在內(nèi)的任意字符，請使用諸如“[\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) 判斷即可

要求二：判斷輸入的字符串是否包含數(shù)字、小寫字母、大寫字母以及特殊字符四種中至少三種的8-20位字符

本次使用vue.js+ElementUI實現(xiàn)判斷密碼強度并用進度條樣式進行提示強度是否符合

先編寫界面代碼：

 <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中定義需要用到的變量，編寫并綁定密碼和再次輸入密碼框的驗證規(guī)則函數(shù)

data(){
 const validatePassword = (rule, value, callback) => {
 if (value === '') {
  callback(new Error('請輸入密碼'));
 } 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('請輸入密碼'));
 } 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中的進度條判斷函數(shù)，即<el-progress :percentage="passwordPercent" :format="passwordPercentFormat">這句界面代碼中format綁定的函數(shù)

 passwordPercentFormat(percentage){
 return percentage === 100 ? '符合' : `不符`;
 }

最后可以通過css調(diào)整一下輸入框的長度

<style scoped>
.el-form-item{
 width: 500px;
}
</style>

這樣就可以實現(xiàn)使用進度條提示密碼強度的效果

附上：

判斷字符串是否符合手機號碼規(guī)范/^1[34578]\d{9}$/

ps：下面給大家分享vue + elementUi 實現(xiàn)密碼校驗

<el-form-item v-else label="密碼" label-width='150px' prop="password">
  <el-input :placeholder="info.password" v-model="info.password" style="width: 500px"></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" style="width: 500px"></el-input>
</el-form-item>
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: '密碼為數(shù)字，小寫字母，大寫字母，特殊符號 至少包含三種，長度為 8 - 30位，密碼不能包含 用戶名，公司名稱(lidian), 公司域名(rekoon) （判斷的時候不區(qū)分大小寫)' }
    ],
    repassword: [
     { required: true, validator: validatePass2, trigger: 'blur' }
    ]
   }
  }
 },

總結(jié)

以上所述是小編給大家介紹的vue.js+ElementUI實現(xiàn)進度條提示密碼強度效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: