Vue.js + elementui to realize the effect of password strength of progress bar prompt

Time:2020-3-22

Requirement 1: judge whether the input string contains 8-20 characters including numbers, lowercase letters, uppercase letters and special characters

Through the search, we know that we can use the regular syntax? = to determine whether there are multiple contents in the string. (? =) this syntax structure means “set followed by” in the regular. Take the following examples to learn more about? = syntax:

(? =. * [a-za-z]) means that there must be an uppercase or lowercase letter after it

(? =. * [1-9]) means that there must be a number after it

(? =. * [\ w]) this sentence means that there must be a non alphanumeric and underlined special symbol after it

(?!. * [\ u4e00 – \ u9fa5]) this sentence means that there can be no Chinese characters after it

. means to match any single character except “\ n”. To match any character, including ‘\ n’, use a pattern such as’ [\ s \ S] ‘.

*Represents zero or more matches to the preceding character or subexpression. For example, to * matches “t” and “too.”. *Equivalent to {0,}.

Get the regular expression: (? =. * [A-Z]) (? =. * [A-Z]) (? =. * [1-9]) (? =. * [\ w]) (!. * [\ u4e00 – \ u9fa5]). {8,20}

Use if (value. Match (/ (? =. * [A-Z]) (? =. * [A-Z]) (? =. * [1-9]) (=. * [\ w]) (!. * [\ u4e00 – \ u9fa5]). {8,20} /) = = null) to judge

Requirement 2: judge whether the input string contains at least three 8-20 characters, including numbers, lowercase letters, uppercase letters and special characters

This time, we use vue.js + elementui to judge the password strength and use the progress bar style to indicate whether the strength meets the requirements

Write the interface code first:

<div>
 <el-form :model="registerFormData" ref="registerForm" :rules="rules">
 < El form item label = "password": label width = "formlabelwidth" prop = "password" >
 < El input show password type = "password" V-model = "registerformdata. Password" autocomplete = "off" placeholder = "8-20 characters in numbers, lowercase, uppercase letters and special characters" > < El input >
 <el-progress :percentage="passwordPercent" :format="passwordPercentFormat"></el-progress>
 </el-form-item>
 < El form item label = "re enter password": label width = "formlabelwidth" prop = "comfirmpassword" >
 <el-input v-model="registerFormData.comfirmPassword" autocomplete="off"></el-input>
 </el-form-item>
 </el-form>
 </div>

Then define the variables needed in the data of Vue, write and bind the verification rule functions of password and re-enter password box

data(){
 const validatePassword = (rule, value, callback) => {
 if (value === '') {
  Callback (new error ('Please enter password ');
 } else {
  //6-20 bits contain characters, numbers and special characters
  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 characters required ');
  ls=0;
  }
  if(this.registerFormData.password.match(/([\u4E00-\u9FA5])+/)){
  Callback (new error ('cannot contain Chinese characters');
  ls=0;
  }
  switch (ls) {
  Case 0: this.passwordpercent = 0; callback (new error ('three out of four digits, lowercase letters, uppercase letters and special characters'); break;
  Case 1: this.passwordpercent = 33; callback (new error ('three out of four digits, lowercase letters, uppercase letters and special characters'); break;
  Case 2: this.passwordpercent = 66; callback (new error ('three out of four digits, lowercase letters, uppercase letters and special characters'); 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 ('Please enter password ');
 } else {
  if (this.registerFormData.comfirmPassword !== this.registerFormData.password) {
  Callback (new error ('the passwords entered are inconsistent ');
  // this.$refs.ruleForm.validateField('checkPass');
  }
  callback();
 }
 };
 return{
 passwordPercent:0,
 //Form variable
 registerFormData: {
  password:'',
  comfirmPassword: '',
 },
 formLabelWidth: '120px'
 },
 rules: {
  password:[
  {required: true, validator: validatePassword, trigger: ['blur', 'change'] },
  ],
  comfirmPassword:[
  {required: true, validator: validateConfirmPassword, trigger: ['blur', 'change'] }
  ],
 },
}

Then write the progress bar judgment function in the element UI, that is, the function bound to format in the interface code < El progress: percentage = “passwordpercent”: format = “passwordpercentformat” >

passwordPercentFormat(percentage){
 Return percentage = = = 100? 'match': 'disagree';
 }

Finally, you can adjust the length of the input box through CSS


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

In this way, the effect of using progress bar to prompt password strength can be realized

Enclosed:

Judge whether the string conforms to the mobile number specification/^1[34578]\d{9}$/

PS: let’s share Vue + elementui to implement password verification

< El form item V else label = "password" 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 = "confirm password" 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 ('Please enter password again '))
   } else if (value !== this.info.password) {
    Callback (new error ('the two passwords are inconsistent!))
   } else {
    callback()
   }
  }
  return {
   info: {
   },
   rules: {
    password: [
     {required: true, message: 'please enter password', trigger: 'blur'},
     ", company name (Lidian), company domain name (rekoon) (case insensitive when judging)"} "
    ],
    repassword: [
     { required: true, validator: validatePass2, trigger: 'blur' }
    ]
   }
  }
 },

summary

The above is the vue.js + elementui that Xiaobian introduced to you. I hope it can help you. If you have any questions, please leave a message to me and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!

Recommended Today

Python basics Chinese series tutorial · translation completed

Original: Python basics Python tutorial Protocol: CC by-nc-sa 4.0 Welcome anyone to participate and improve: a person can go very fast, but a group of people can go further. Online reading Apache CN learning resources catalog introduce Seven reasons to learn Python Why Python is great Learn Python introduction Executing Python scripts variable character string […]