Element UI 弹窗打开自动校验提示问题解决

你是否遇到过使用 Element UI 的弹窗组件 el-dialog 时，弹窗一打开就自动进行表单校验并显示提示信息的情况？

问题代码：

<el-dialog title='卡密注销' width='40%' :before-close='cardDialogClose' :visible.sync='cardDialogShow'
      custom-class='mark-dialog' :close-on-click-modal='alowClick'>
      <p class='tips'>注销后，如卡密已激活则套餐将失效，请谨慎操作</p>

      <el-form :model='ruleForm' :rules='rules' ref='ruleForm'>
        <el-form-item label-width='200px' label='卡密 : '>
          <span>{{ formatCardPwd(currentLogOffCardInfo.cardPwd) }}</span>
        </el-form-item>
        <el-form-item label-width='200px' label='兑换状态 : '>
          <span>{{ formatCardStatus(currentLogOffCardInfo.cardStatus, 'showStatus') }}</span>
        </el-form-item>
        <el-form-item label-width='200px' label='安全验证码 :' prop='authCode'>
          <el-input v-model.trim='ruleForm.authCode' style='width:300px' type='text' ref='googleAuthInput'
            class='googleAuthInput' :maxlength='6' placeholder='请输入Google Auth安全验证码' @keyup.enter.native='checkAuth'>
          </el-input>
        </el-form-item>
      </el-form>
      <div class='btn-bar'>
        <el-button style='width:100px;margin-right:20px' plain @click='cardDialogClose'>取消</el-button>
        <el-button type='primary' @click='confirmLogOff'>确定注销</el-button>
      </div>
    </el-dialog>

原因分析：

出现这种情况的原因是你在 el-form 组件上绑定了 rules 属性，并且在 el-form-item 上设置了 prop 属性。当 el-dialog 打开时，el-form 会自动根据 rules 对表单字段进行校验，而 prop 属性则指定了需要校验的字段。

解决方案：

如果你希望弹窗打开时不进行自动校验，可以通过以下方法解决：

使用 validate-on-rule-change 属性

在 el-form 组件上添加 validate-on-rule-change 属性并设置为 false，可以禁用表单规则变化时的自动校验：
```
<el-form :model='ruleForm' :rules='rules' ref='ruleForm' validate-on-rule-change='false'>
</el-form>
```

手动控制校验时机

你可以通过 el-form 的 validate 方法手动触发校验，例如在点击提交按钮时进行校验：

<el-button type='primary' @click='submitForm'>确定注销</el-button>

// ...
methods: {
  submitForm() {
    this.$refs.ruleForm.validate((valid) => {
      if (valid) {
        // 校验通过，执行提交逻辑
      } else {
        // 校验失败
      }
    });
  }
}

通过以上方法，你可以灵活控制表单校验的时机，避免弹窗打开时自动校验带来的困扰。