vue.js+ElementUI实现进度条提示密码强度效果

(编辑:jimmy 日期: 2024/11/16 浏览:2)

要求一:判断输入的字符串是否包含数字、小写字母、大写字母以及特殊字符四种内容的8-20位字符

通过搜索了解到可以使用"htmlcode">

 <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位字符在数字、小写、大写字母以及特殊字符中四选三"></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中定义需要用到的变量,编写并绑定密码和再次输入密码框的验证规则函数

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中的进度条判断函数,即<el-progress :percentage="passwordPercent" :format="passwordPercentFormat">这句界面代码中format绑定的函数       

 passwordPercentFormat(percentage){
 return percentage === 100 "htmlcode">
<style scoped>
.el-form-item{
 width: 500px;
}
</style>

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

vue.js+ElementUI实现进度条提示密码强度效果

vue.js+ElementUI实现进度条提示密码强度效果

vue.js+ElementUI实现进度条提示密码强度效果

vue.js+ElementUI实现进度条提示密码强度效果

vue.js+ElementUI实现进度条提示密码强度效果

附上:

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

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

<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="确认密码" 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: /^("color: #ff0000">总结

以上所述是小编给大家介绍的vue.js+ElementUI实现进度条提示密码强度效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。