vue前端修改用户密码验证密码格式

最新推荐文章于 2024-06-24 19:39:47 发布

金刚大力士

最新推荐文章于 2024-06-24 19:39:47 发布

阅读量2k

点赞数 1

分类专栏： vue学习

本文链接：https://blog.csdn.net/qq_42177730/article/details/115177152

版权

该博客内容涉及使用Vue进行前端界面的密码修改功能实现，包括原密码、新密码、确认密码和口令的输入验证。通过自定义验证规则，确保密码格式符合特定要求，例如必须包含数字、大小写字母和特殊字符，并且长度在一定范围内。

摘要由CSDN通过智能技术生成

<el-dialog title="修改密码" :visible.sync="dialogFormVisible" class="updatepwdbox" :before-close="cancelform" :close-on-click-modal="false">
<el-form :model="pwddata" label-width="100px" status-icon :rules="rules2" ref="ruleFormPWD">

<el-form-item prop="oldpwd" label="原密码：" >
<el-input type="password" v-model="pwddata.oldpwd" autocomplete="off" placeholder="请输入原密码"></el-input>
</el-form-item>
<el-form-item prop="onepwd" label="新密码：" >
<el-input type="password" v-model="pwddata.onepwd" autocomplete="off" :placeholder="pwdTips"></el-input>
</el-form-item>
<el-form-item prop="twopwd" label="确认密码：" >
<el-input type="password" v-model="pwddata.twopwd" autocomplete="off" :placeholder="pwdTips"></el-input>
</el-form-item>
<el-form-item prop="keypwd" label="口令：" >
<el-input type="password" v-model="pwddata.keypwd" autocomplete="off" placeholder="重置密码属于敏感操作，需输入平台口令密码" maxlength="20"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancelform()">取消</el-button>
<el-button type="primary" @click="submitForm()">确定</el-button>
</div>
</el-dialog>

export default {

data: function () {
var validatePass = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入密码'));
} else {
// const reg = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*)(?=.*[~!@#$%^&*()_+={}:;<>?,.].*).{8,12}$ /;
console.log(this.pwdreg);
const reg = new RegExp(this.pwdreg,'');
if (reg.test(value)) {
callback();
} else {
return callback(new Error('密码格式不正确，'+this.pwdTips));
}
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.pwddata.onepwd) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
leftNav:true,
collapsed:false,
sysUserName: '',
activemenu:'index',
secondMenuselected:'',
title:'首页',
navselected:"index",
menulist:[],
dialogVisible:false,
dialogFormVisible: false,
pwddata:{
oldpwd:'',
onepwd:'',