vue 修改密码

<template>
    <el-container>
    <div class="personIndex">
      <div class="person_cont">
            <div class="setting_top">
                <div class="setting_title">
                    <p class="icon_right"><i class="el-icon-setting"></i> Change Password</p> 
                </div>
            </div>
            <div class="person_datlist">
              <div class="joblist">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <p>Old Password</p>
                  <el-form-item label="" prop="old_pwd">
                    <el-input type="password" v-model="ruleForm.old_pwd" autocomplete="off" show-password></el-input>
                  </el-form-item>
                  <p>New Password</p>
                  <el-form-item label="" prop="pwd">
                    <el-input type="password" v-model="ruleForm.pwd" autocomplete="off" show-password></el-input>
                  </el-form-item>
                  <p>Confirm new password</p>
                  <el-form-item label="" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" show-password></el-input>
                  </el-form-item>
                
                  <el-form-item>
                    <el-button class="seetingbtn" @click="submitForm('ruleForm')">Submit</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
      </div>
    </div>
  </el-container>
</template>
<script>
import "@/styles/publicstyle.scss";
export default {
    data() {
       var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('Please enter password'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var newpasswors = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('please enter new password'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };    
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('Please enter your password again'));
        } else if (value !== this.ruleForm.pwd) {
          callback(new Error('The two passwords are inconsistent!'));
        } else {
          callback();
        }
      };
      return {
        uid:'123456@qq.com',
        ruleForm: {
          old_pwd: '',
          pwd: '',
          checkPass: ''
          
        },
        rules: {
          old_pwd: [
            { validator: validatePass, trigger: 'blur' }
          ],
          pwd: [
            { validator: newpasswors, trigger: 'blur' }
          ],         
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          console.log(valid)
          if (valid) {            
            this.$axios.post("/update_pwd",null,{
                params:{
                  uid:this.uid,
                  old_pwd:this.ruleForm.old_pwd,
                  pwd:this.ruleForm.pwd,                            
                }
            }).then(res=>{
                console.log(res)
                if(res.data.code == 200){                    
                    this.$message({
                        message: res.data.msg,
                        type: 'success',
                        onClose:()=>{
                            this.$router.go(0)
                        }
                    });
                }else{
                    this.$warning(res.data.msg);
                }

            }).catch(err=>{
                this.$message( err.data.msg);
            })
          } else {
            return false;
          }
        });
      },
    }
  }
</script>
<style lang='scss'>

$mainbgColor:#414de1;
$whiteColor:#fff;
.el-form{
  margin-top: 20px;
  p{
    text-align: left;
    margin-bottom: 10px;
  }
}
.el-form-item__content{
  margin-left: 0px !important;
  text-align: center;
}
.el-form-item.is-error {
  border-color: rgba(65,77,225,0.1);
}
.el-form-item {
    margin-bottom: 25px;
}
.seetingbtn{
    width: 310px;
    font-size: 16px;
    margin-top: 56px;
    color: $whiteColor;
    background-color: $mainbgColor;
    border: none;
    
}
.setting_top{
    height: 60px;
    line-height: 60px;
    text-align: left;
    font-size: 18px;
    color: #000026;
    padding: 0 25px;
    border-bottom: 1px #f1f1f5 solid;
}
.el-icon-setting{
    font-size: 20px;
    margin-right: 6px;
}
</style>