element-ui的modal中表單驗證

.vue文件內容如下：

<template>
  <div>
    <el-button type="text" @click="dialogFormVisible = true">驗證</el-button>

    <el-dialog title="驗證管理員key" :visible.sync="dialogFormVisible" :modal="true" width="600px" :fullscreen="false" @open="openDialog" @close="closeDialog">
      <el-form status-icon :model="form" :rules="rules" ref="ruleForm" size="small" label-width="100px">
        <el-form-item label="賬號" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="證書等級" prop="certlvl">
          <el-select v-model="form.certlvl" style="width:100%">
            <el-option label="一級" value="1"></el-option>
            <el-option label="二級" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="PIN碼" prop="pin">
          <el-input type="password" v-model="form.pin"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">確 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    var validateName = (rule, value, callback) => {
      if(value === ""){
        callback(new Error("請輸入用戶名！"))
      }else if(value.length < 6){
        callback(new Error("用戶名必須大於5個字符"));
      }
    }

    let regexp = /^[0-9]+$/;
    var validatePin = (rule, value, callback) => {
      if(value === ""){
        callback(new Error("PIN碼不能爲空！"))
      }else if(!regexp.test(value)){
        callback(new Error("PIN碼只能爲數字"));
      }
    }

    return {
      dialogFormVisible: false,
      rules: {
        name: [
          { validator: validateName, trigger: "blur" },
          { required: true, trigger: "blur" }
        ],
        certlvl: [
          { required: true, message: "請選擇證書等級", trigger: "change" }
        ],
        pin: [
          { validator: validatePin, trigger: "blur" },
          { required: true, trigger: "blur" }
        ]
      },
      form: {
        name: "",
        certlvl: "",
        pin: ""
      }
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("確認關閉？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false;
          console.log("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    openDialog(){
      this.form.name = "123456";
      this.form.certlvl = "1";
      this.form.pin = "123456";
    },
    closeDialog(){
      this.$refs['ruleForm'].resetFields()
    }
  }
};
</script>

<style scoped>
</style>