Element UI 表单在el-form-item中使用自定义验证规则

1：官网示例

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      return {
        ruleForm: {
          pass: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      
    }
  }
</script>

 

但现在需求是需要在el-form-item中写验证规则，并使用自定义验证

<el-form-item label="地址:" :prop="pass" :rules="{ validator: this.validatePass, trigger: 'blur' }" label-width="90px">
    <el-input v-model="contact.address" clearable placeholder="请输入" ></el-input>
</el-form-item>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          pass: ''
        }
      };
    },
    methods: {
      validatePass (rule, value, callback) {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      }
    }
  }
</script>