实现修改密码的功能(Vue+elementUI)
<!-- 修改密码界面 --><el-dialog title="重置密码" width="30%" :visible.sync="cgpwdVisible" :close-on-click-modal="false":modal-append-to-body='false' @close="handleCloseDialog"><el-form :model="da
·
<!-- 修改密码界面 -->
<el-dialog title="重置密码" width="30%" :visible.sync="cgpwdVisible" :close-on-click-modal="false"
:modal-append-to-body='false' @close="handleCloseDialog">
<el-form :model="dataForm" label-width="100px" :rules="dataFormRules" ref="dataForm" label-position="right">
<el-form-item label="旧密码:" prop="oldpassword">
<el-input v-model="dataForm.oldpassword" type="password" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="新密码:" prop="newpassword" label-width="100px">
<el-input v-model="dataForm.newpassword" type="password" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码:" prop="checkpassword" label-width="100px">
<el-input v-model="dataForm.checkpassword" type="password" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer" style="margin-top: 5px;">
<el-button type="primary" @click.native="handleUpdataPw">确认</el-button>
<el-button @click.native="cgpwdVisible = false" type="danger">取消</el-button>
</div>
</el-dialog>
//属性和方法
data() {
//定义的旧密码验证是否成功和新密码输入的是否一致
var checkOldPw = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入旧密码'));
}
this.checkIsRepeat(value, function () { //checkIsRepeat用来调用接口验证用户输入的旧密码是否为数据库存储的密码一致,一致你才可以修改密码
callback();
}, function (err) {
callback(new Error(err.message));
})
};
var checkNewPw = (rule, value, callback) => {
if (!value) {
return callback(new Error('请再次输入密码'));
}
if (this.dataForm.newpassword !== value) {
callback(new Error("密码不一致"));
} else {
callback()
}
};
return {
cgpwdVisible: false,
dataForm: {
oldpassword: '',
newpassword: '',
checkpassword: ''
},
dataFormRules: {
oldpassword: [{
required: true,
validator: checkOldPw,
trigger: 'blur'
}],
newpassword: [{
required: true,
message: '请输入新密码',
trigger: 'blur'
}],
checkpassword: [{
required: true,
validator: checkNewPw,
trigger: 'blur'
}]
},
},
method() {
//关闭时候清空表单
handleCloseDialog() {
this.$refs.dataForm.resetFields();
},
// 校验旧密码
checkIsRepeat(oldpw, success, error) {
var userId = JSON.parse(sessionStorage.getItem("login")).userInfo.suId;
if (!oldpw) return;
var params = {
oldpassword: oldpw,
userId: userId
}
ajaxNewGet(getNativePath2() + "user/checkSysUserPwd", params, function (res) { //设置dataType: 'json',希望服务器返回的数据类型
if (res.code == 200) {
success()
} else {
error(res)
}
}, function (err) {
console.log("err", err)
})
},
//修改密码,调用接口更改
handleUpdataPw() {
var userId = JSON.parse(sessionStorage.getItem("login")).userInfo.suId;
var formData = new FormData();
formData.append("suId", userId);
formData.append("suPwd", this.dataForm.newpassword);
var that = this;
this.$refs.dataForm.validate((valid) => {
if (!valid) return;
ajaxPostForm(getNativePath2() + "user/updSuPwd", formData, res => { //以formData格式传给后端,其他属性可以关掉,设置这俩个很重要:processData: false, contentType: false,
if (res.code == '200') {
this.$message.success(res.message)
this.cgpwdVisible = false;
this.$refs.dataForm.resetFields();
setTimeout(function () {
that.quitHander()
}, 1000)
} else {
this.$message.error(res.message)
}
}, err => {
console.log("err", err)
})
})
},
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)