商业网站开发教程,济南网站建设公司有哪些,西陆网,wordpress首页不同列表样式用户登录后修改密码#xff0c;密码需要一定的验证规则。旧密码后端验证是否正确#xff1b;前端验证新密码的规范性#xff0c;新密码规范为#xff1a;6-16位#xff0c;至少含数字/字母/特殊字符中的两种#xff1b;确认密码只需要验证与新密码是否一致#xff1b; 弹… 用户登录后修改密码密码需要一定的验证规则。旧密码后端验证是否正确前端验证新密码的规范性新密码规范为6-16位至少含数字/字母/特殊字符中的两种确认密码只需要验证与新密码是否一致 弹窗结构 el-dialog title修改密码:visible.syncpassDlgVisibleclosepassDlgClosewidth400pxel-form :modelpassFormrefpassRef:rulespassRuleshide-required-asterisklabel-width70pxsizesmallel-form-item label旧密码 propoldPasswordel-input v-modelpassForm.oldPassword show-password/el-input/el-form-itemel-form-item label新密码 propnewPasswordel-input v-modelpassForm.newPassword show-password/el-input/el-form-itemel-form-item label确认密码 propconfirmPasswordel-input v-modelpassForm.confirmPassword show-password/el-input/el-form-item/el-formspan slotfooterel-button clickpassDlgVisiblefalse sizesmall取消/el-buttonel-button clickpassSave typeprimary sizesmall确认/el-button/span
/el-dialogform验证规则 passRules: {oldPassword:[{required: true, message: 请输入旧密码, trigger: blur}],newPassword:[{validator: this.validNewPass, trigger: blur}],confirmPassword:[{validator: this.validConfirmPass, trigger: blur}]
}验证函数 /*** 验证新密码*/
validNewPass(rule, value, callback) {let reg /(?!^(\d|[a-zA-Z]|[~!#$%^*?])$)^[\w~!#$%^*?]{6,16}$/if (value ) {callback(new Error(请输入新密码));} else if (!reg.test(value)) {callback(new Error(6-16位至少含数字/字母/特殊字符中的两种))} else {if (this.passForm.confirmPassword ! ) {this.$refs.passRef.validateField(confirmPassword);}callback();}
},/*** 验证确认密码*/
validConfirmPass(rule, value, callback) {if (value ) {callback(new Error(请再次输入密码));} else if (value ! this.passForm.newPassword) {callback(new Error(两次输入密码不一致!));} else {callback();}
}弹窗关闭后清空字段和验证 /*** 弹窗关闭事件*/
passDlgClose() {this.passForm {oldPassword: ,newPassword: ,confirmPassword: }this.$refs.passRef.clearValidate();
}提交表单 passSave() {this.$refs.passRef.validate((valid) {if (valid) {this.passForm.userName this.userNameapi.user.editPass(this.passForm).then(res {this.passDlgVisible false;})} else {return false;}});
}这就是修改密码的全部流程啦。。。。有问题评论区答复。。。。能解决的就答复不能解决的自己百度哈。。。。
