vue密码强度提示条

两种，先上效果图：

第一种：

第二种：

上前端代码
第一种：
vue页面：

<el-form ref="reForm" :model="reForm" :rules="rules"><el-form-item label="请输入新密码" prop="newPwd"><el-input style="width: 300px;" v-model="reForm.newPwd" maxlength="16" show-password type="password" placeholder="可填写数字、字母及特殊符号" /></el-form-item><el-form-item v-if="reForm.newPwd!==''&&reForm.newPwd!==undefined" label="" align="center" label-width="0"><!--密码强度显示条--><table  border="0" align="center" style="width: 25%;margin-left: 0px"><tr><td width="30%"><el-progress :percentage="100" :color="low" :format="format"></el-progress></td><td width="30%"><el-progress :percentage="100" :color="middle" :format="format"></el-progress></td><td width="30%"><el-progress :percentage="100" :color="high" :format="format"></el-progress></td><td width="10%"><div class="strength" :style="{color: fontColor}" v-if="user.newPassword!==''&&user.newPassword!==undefined">{{ strength }}</div></td></tr></table></el-form-item></el-form>
<script>
//这里我是从后台判断的
//读者完全可以在前台设置检验方式，如正则表达式
import {checkPasswd} from "api";
export default {name: "User",data() {const checkPawd = (rule, value, callback) => {checkPasswd(value).then(res=>{if(res.msg !=='notCheck'){this.notCheck=falseif (res.msg === '低') {this.fontColor = 'red'this.strength = this.indicator['red']}if (res.msg === '中') {this.fontColor = 'orange'this.strength = this.indicator['orange']}if (res.msg === '高') {this.fontColor = 'blue'this.strength = this.indicator['blue']}}else{this.notCheck=true}callback();})};return {low:'#cccccc',middle:'#cccccc',high:'#cccccc',notCheck:true,fontColor: "red",strength: "",indicator: {"red": "低","orange": "中","blue": "高"},// 表单校验rules: {newPwd:[ { required: true, message: "新密码不能为空", trigger: "blur" },{validator: checkPawd,trigger: ['blur','change']}],}};},methods: {//格式化进度显示format(percentage) {return percentage === 100 ? '' : `${percentage}%`;},submit() {this.$refs["form"].validate(valid => {if (valid) {//若开启校验if(this.notCheck === false){//若密码强度不为低则通过if(this.strength!=='低'){// this.updateUserPwd()}else{this.msgError('密码强度过低')}}else{//未开启校验,直接修改// this.updateUserPwd()}}});},}
};
</script>
<style lang="scss" scoped>.el-progress{width:160%;
}
.strength {font-size: 13px;color: #271E25;position: relative;top: 5px;left: 0;transition: 0.5s all ease;
}
</style>

第二种：
vue页面：

<el-form ref="reForm" :model="reForm" :rules="rules"><el-form-item label="请输入新密码" prop="newPwd"><el-input style="width: 300px;" v-model="reForm.newPwd" maxlength="16" show-password type="password" placeholder="可填写数字、字母及特殊符号" /></el-form-item><el-form-item v-if="reForm.newPwd!==''&&reForm.newPwd!==undefined" label="" align="center" label-width="0"><div class="bar" :class="barColor" v-if="reForm.newPwd!==''&&reForm.newPwd!==undefined" :style="{width: width + 'px'}"><div class="strength" :style="{color: barColor}" v-if="reForm.newPwd!==''&&reForm.newPwd!==undefined">{{ strength }}</div></div></el-form-item></el-form>
<script>
//这里我是从后台判断的
//读者完全可以在前台设置
import {checkPasswd} from "api";
export default {name: "User",data() {const checkPawd = (rule, value, callback) => {checkPasswd(value).then(res=>{if(res.msg !=='notCheck'){this.notCheck=falseif (res.msg === '低') {this.width = 60this.barColor = 'red'this.strength = this.indicator['red']}if (res.msg === '中') {this.width = 120this.barColor = 'orange'this.strength = this.indicator['orange']}if (res.msg === '高') {this.width = 180this.barColor = 'blue'this.strength = this.indicator['blue']}}else{this.notCheck=true}callback();})};return {barColor: "red",strength: "",indicator: {"red": "低","orange": "中","blue": "高"},width:0,notCheck:true,//重置密码标题titleRest:"",reForm:{userIdforPwd: 0,newPwd:''},// 表单校验rules: {newPwd:[ { required: true, message: "新密码不能为空", trigger: "blur" },{validator: checkPawd,trigger: ['blur','change']}],}};},methods: {/** 重置密码按钮操作 */handleResetPwd(row) {this.titleRest="重置用户密码"// this.reForm.userIdforPwd=row.userIdthis.openReset=true},//密码重置提交submitPwdForm(){this.$refs["reForm"].validate(valid => {if (valid) {//若开启校验if(this.notCheck === false){//若密码强度不为低则通过if(this.strength!=='低'){this.resetPassword()}else{this.msgError('密码强度过低')}}else{//未开启校验,直接修改this.resetPassword()}}})},//重置密码的方法resetPassword(){resetUserPwd(this.reForm.userIdforPwd, this.reForm.newPwd).then(res => {this.openReset = falsethis.reForm.newPwd = ''this.reForm.userIdforPwd = 0this.msgSuccess('重置成功')})}}
};
</script>
<style lang="scss" scoped>.strength {font-size: 13px;color: #271E25;position: relative;top: 5px;left: 0;transition: 0.5s all ease;}.bar {width: 60px;height: 5px;background: red;transition: 0.5s all ease;max-width: 180px;margin: 10px 0 5px 5px;position: absolute;}.red {background: red;}.orange {background: orange;}.blue {background: #1B8EF8;}
</style>

vue密码强度提示条相关推荐

element ui滑动登录，密码强度提示
我们知道验证码的目的是为了验证到底是人还是机器. 我这里写的只是模仿了样式,并没有进行那些复杂的操作,所以并不安全(不能判断人还是机器),下面看效果: 一.新建文件logi.vue,把密码强度和拖动 ...
改善用户体验之密码强度提示
第一步:保存图片第二步:根据您的需要修改js文件中该图片地址.如下所示: var bImg="pwdlen.gif";//一张显示用的图片第三步:在需要检测的页面中引用这个脚本 ...
微服务架构系列二：密码强度评测的实现与实验
本文是继<微服务架构系列一:关键技术与原理研究>的后续,系列一中论述了微服务研究的背景和意义,主要调研了传统架构的发展以及存在的问题和微服务架构的由来,然后针对微服务架构的设计原则.容器技 ...
elementui进度条如何设置_vue.js+ElementUI实现进度条提示密码强度效果
要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示&qu ...
jsp注册里密码强弱怎么弄_vue.js+ElementUI实现进度条提示密码强度效果
要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示&qu ...
sqlserver去掉密码强度验证_安装sql2008数据库引擎配置时,提示sa密码强度不满足要求怎么办?...
展开全部设置带有数字,符号,大写字母,小写字母,还有8个位数以上的密码 Microsoft SQL Server2008安装配置过程:e69da5e887aa32313133353236313431 ...
jsf 自定义属性_如何在JSF中实现自定义密码强度指示器
jsf 自定义属性使用JavaScript验证密码强度是一项常见任务. 在本文中,我将展示如何向基于JSF的Web应用程序添加密码强度指示器. 的 PrimeFaces中的密码组件已经具有密码强度的 ...
如何在JSF中实现自定义密码强度指示器
使用JavaScript验证密码强度是一项常见任务. 在本文中,我将展示如何向基于JSF的Web应用程序添加密码强度指示器. 的 PrimeFaces中的密码组件已经具有密码强度的反馈指示符,但是它有 ...
超棒的jQuery密码强度检验插件 - Complexify
日期:2012-9-3 来源:GBin1.com 在线演示本地下载密码强度检验插件对于提高用户的密码安全性,起着至关重要的作用,在今天的jQuery插件分享中,我们介绍来自Dan palmer ...

vue密码强度提示条

vue密码强度提示条相关推荐

最新文章

热门文章