vue修改密码包含完整正则+密码验证

最新推荐文章于 2024-07-18 16:57:14 发布

liberalhumblehopeful

最新推荐文章于 2024-07-18 16:57:14 发布

阅读量1.2k

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/fhrlhh/article/details/127616778

版权

页面就三个输入框 , 旧密码 ,新密码 ,再次确认密码

下面上代码

页面代码弹窗形式写的主要注意 :model="ruleForm" ref="ruleForm" :rules="rules"

 <el-dialog title="修改密码" :visible.sync="dialogVisible" width="550px" :before-close="handleClosedialog">
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px">
                <el-form-item label="原密码" prop="oldPassword">
                    <el-input v-model="ruleForm.oldPassword" type="password" autocomplete="off"> </el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="ruleForm.newPassword" type="password" autocomplete="off"> </el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off"> </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer newfooter">
                <el-button :loading="loading" type="primary" @click="confirmChangePwd">确 定</el-button>
                <el-button :loading="loading" @click="handleClosedialog">取 消</el-button>
            </span>
        </el-dialog>

js代码

<script>

export default {
    data() {
        const newPassFn = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'))
            } else {
                if (this.ruleForm.newPassword !== '') {
                    this.$refs.ruleForm.validateField('checkPass')
                }
                callback()
            }
        }
        const confirmPassFn = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.ruleForm.newPassword) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }
        return {
            ruleForm: {
                oldPassword: '',
                newPassword: '',
                password: '',
            },
            rules: {
                oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
                newPassword: [{ required: true, validator: newPassFn, trigger: 'blur' }],
                password: [{ required: true, validator: confirmPassFn, trigger: 'blur' }],
            },
        }
    },

    methods: {
    
         // 修改密码
    confirmChangePwd() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const obj = {
            ...this.ruleForm,
            userId:this.userId
          };
          changePwd(obj)
            .then((res) => {
              if (res.code == 200) {
                this.dialogVisible = false;
                this.$message({
                  message: "修改成功，请重新登录！",
                  type: "success",
                });
                this.$nextTick(() => {
                  this.$refs["ruleForm"].clearValidate();
                });
                setTimeout(() => {
                  localStorage.clear();
                  removeToken();
                  this.$router.push(`/login?redirect=${this.$route.fullPath}`);
                }, 2000);
              }
            })
            .catch(() => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    },
}
</script>