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


Posted in Javascript onJanuary 18, 2020

要求一:判断输入的字符串是否包含数字、小写字母、大写字母以及特殊字符四种内容的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实现判断密码强度并用进度条样式进行提示强度是否符合

先编写界面代码:

<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 ? '符合' : `不符`;
 }

最后可以通过css调整一下输入框的长度

<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: /^(?![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实现进度条提示密码强度效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
EsLint入门学习教程
Feb 17 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 Javascript
JS数组方法concat()用法实例分析
Jan 18 #Javascript
JS实现纵向轮播图(初级版)
Jan 18 #Javascript
JS数组方法reverse()用法实例分析
Jan 18 #Javascript
JS实现横向轮播图(初级版)
Jun 24 #Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 #Javascript
微信小程序开发中var that =this的用法详解
Jan 18 #Javascript
JavaScript实现滑动门效果
Jan 18 #Javascript
You might like
PHP生成带有雪花背景的验证码
2006/10/09 PHP
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
js实现分页功能
2017/05/24 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
python合并同类型excel表格的方法
2018/04/01 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
python实现ip地址的包含关系判断
2020/02/07 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
团日活动策划书
2014/02/01 职场文书
小学新学期寄语
2014/04/02 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
岳庙导游词
2015/02/04 职场文书
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript