<template> <div class="app_content"> <a-spin :spinning="loading" style="width: 100%;height: 100%;"> <a-form-model ref="form" :model="formData" :rules="formRules" class="from-table"> <a-row> <a-col :span="6" class="bg-gray"> <div class="required">原密码</div> </a-col> <a-col :span="18"> <a-form-model-item prop="oldPassword"> <a-input type="password" placeholder="请输入原密码" v-model="formData.oldPassword" :readOnly="readOnly" @click="() => {this.readOnly=false }" @check="() => { this.readOnly=false }" @blur="() => { this.readOnly=false }" style="width: 300px" ></a-input> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="6" class="bg-gray"> <div class="required">新密码</div> </a-col> <a-col :span="18"> <a-form-model-item prop="newPassword"> <a-input type="password" placeholder="请输入新密码" v-model="formData.newPassword" @change="PassworcChanged" style="width: 300px" ></a-input> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="24"> <table border="1" cellpadding="1" cellspacing="1" style="background-color:#e0f0ff; line-height: 20px; margin-top: 10px;"> <tr> <td id="strength_L" style="width: 150px; height: 10px;" align="center">弱</td> <td id="strength_M" style="width: 150px; height: 10px;" align="center">中</td> <td id="strength_H" style="width: 150px; height: 10px;" align="center">强</td> </tr> </table> </a-col> </a-row> <a-row> <a-col :span="6" class="bg-gray"> <div class="required">确认新密码</div> </a-col> <a-col :span="18"> <a-form-model-item prop="checkPwd"> <a-input type="password" placeholder="请确认新密码" v-model="formData.checkPwd" style="width: 300px" ></a-input> </a-form-model-item> </a-col> </a-row> <a-row> <a-col :span="24" style="text-align: center;"> <a-button @click="closeWindow">取消</a-button> <a-button type="primary" style="margin-left: 8px" @click="submit">保存</a-button> </a-col> </a-row> </a-form-model> </a-spin> </div> </template> <script> import { removeToken } from '@/views/utils/auth' import { isEmptyParams } from "@/views/utils/common" export default { name: "updatePwd", data () { return { loading: false, readOnly: true, // form表单 formData: { userId: undefined, oldPassword: undefined, newPassword: undefined, checkPwd: undefined, }, formRules: { oldPassword: [ { required: true, message: '请输入原密码' } ], newPassword: [ { required: true, message: '请输入新密码' }, { validator: (rule, value, callback) => { if (value == '' || value == undefined) { callback() } let ckPwd = /^(?=.*\d)(?=.*[a-zA-Z]).{6,12}$/; if (ckPwd.test(value)) { callback() } else { callback(new Error('密码只能由数字和字母混合组成,长度为6-12位~')); } } }, ], checkPwd: [ { required: true, message: '请确认新密码' }, { validator: (rule, value, callback) => { if (value == '' || value == undefined) { callback() } if (value == this.formData.newPassword) { callback() } else { callback(new Error('与新密码不一致!')); } }, }, ], }, } }, created () { }, methods: { PassworcChanged() { this.pwStrength(); }, //CharMode函数 //测试某个字符是属于哪一类. CharMode(iN) { if (iN >= 48 && iN <= 57) //数字 return 1; if (iN >= 65 && iN <= 90) //大写字母 return 2; if (iN >= 97 && iN <= 122) //小写 return 4; else return 8; //特殊字符 }, //bitTotal函数 //计算出当前密码当中一共有多少种模式 bitTotal(num) { let modes = 0; for (var i = 0; i < 4; i++) { if (num & 1) modes++; num >>>= 1; } return modes; }, //checkStrong函数 //返回密码的强度级别 checkStrong(sPW) { if (sPW.length < 6) return 0; //密码太短 let Modes = 0; for (var i = 0; i < sPW.length; i++) { //测试每一个字符的类别并统计一共有多少种模式. Modes |= this.CharMode(sPW.charCodeAt(i)); } return this.bitTotal(Modes); }, //pwStrength函数 //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色 pwStrength() { var pwd = this.formData.newPassword; let Lcolor = ""; let Mcolor = ""; let Hcolor = ""; if (pwd == "") { Lcolor = Mcolor = Hcolor = "#e0f0ff"; return; } var O_color = "#e0f0ff"; var L_color = "#FF0000"; var M_color = "#FF9900"; var H_color = "#33CC00"; if (pwd == null || pwd == '') { Lcolor = Mcolor = Hcolor = O_color; return; } var S_level = this.checkStrong(pwd); switch (S_level) { case 0: Lcolor = Mcolor = Hcolor = O_color; break; case 1: Lcolor = L_color; Mcolor = Hcolor = O_color; break; case 2: Lcolor = Mcolor = M_color; Hcolor = O_color; break; default: Lcolor = Mcolor = Hcolor = H_color; break; } document.getElementById("strength_L").style.background = Lcolor; document.getElementById("strength_M").style.background = Mcolor; document.getElementById("strength_H").style.background = Hcolor; }, CheckPasswordStrong() { var pwdOld = this.formData.oldPassword; var pwd1 = this.formData.newPassword; var pwd2 = this.formData.checkPwd; if (pwdOld == "") { alert("请填写原密码!"); return false; } if (pwd1 == "") { alert("请填写新密码!"); return false; } if (pwd2 == "") { alert("请填写确认密码!"); return false; } var S_level = this.checkStrong(pwd1); if (S_level >= 2) return true; else { alert("密码安全等级不够,请重新填写!"); return false; } }, submit () { let vm = this this.$refs.form.validate(valid => { if (valid) { let pars = isEmptyParams(vm.formData) let par = { ...pars } vm.$api.base.updatePwd(par).then(data => { if (data) { alert("修改成功,请重新登录!") window.sessionStorage.clear(); removeToken() window.location.href = "/" } }) } }); }, closeWindow () { this.$emit('close', 'close') } } } </script> <style scoped lang="less"> .tab_input_r { .ant-form-item { margin: 0px 0px !important; } .ant-input { margin-top: 20px; width: 180px; } .ant-form-item-control { width: 180px !important; } .ant-row { height: 80px; } } </style>