為什么明明輸了兩個符合條件的一模一樣的密碼也不行？

代碼如下，輸了兩個符合長度條件的一模一樣的密碼之后，
控制臺總是提示async-validator: password is required

        <el-form-item label="密碼" :label-width="formLabelWidth" prop="password">
          <el-input type="password" v-model.trim="password" auto-complete="off" placeholder="密碼"></el-input>
        </el-form-item>
        <el-form-item label="確認密碼" :label-width="formLabelWidth" prop="confirm_password">
          <el-input type="password" v-model.trim="confirmPassword" auto-complete="off" placeholder="確認密碼"></el-input>
        </el-form-item>


export default {
  name: 'addUser',
  props: ['addUserDialogVisibleFromParent'],
  data() {

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('請再次輸入密碼'));
      } else if (value !== this.password) {
        console.log('value',value)
        console.log('this.password',this.password)
        callback(new Error('兩次輸入密碼不一致!'));
      } else {
        callback();
      }
    };

    return {
      password: '',
      confirmPassword: '',

      rules: {
        username: [
          { required: true, message: '請輸入新的用戶名稱', trigger: 'blur' },
          { min: 1, max: 20, message: '用戶名的長度不得超過20個字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '請設置登錄密碼', trigger: 'blur' },
          { min: 6, max: 15, message: '長度在 6 到 15 個字符', trigger: 'change' }
        ],
        confirm_password: [
          { required: true, message: '請確認登錄密碼', trigger: 'blur' },
          // { min: 6, max: 15, message: '長度在 6 到 15 個字符', trigger: 'change' },
          { validator: validatePass, trigger: 'change' }
        ],
        email: [
          { required: false, message: '請輸入電子郵件地址', trigger: 'blur' },
          { type: "email", message: '非法的電子郵件地址', trigger: 'blur' }
        ],
        description: [
          { required: false, message: '請輸入描述', trigger: 'blur' },
          { max: 200, message: '描述內(nèi)容不得超過200個字符', trigger: 'blur' }
        ],
      },
      formLabelWidth: '80px'
    }
  },

回答

編輯回答

幼梔

官方實例 from自定義校驗規(guī)則

var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('請輸入密碼'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('請再次輸入密碼'));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('兩次輸入密碼不一致!'));
        } else {
          callback();
        }
      };

rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
  }

2017年12月11日 16:36