elementui表单验证踩过的坑

1.表单验证model、rules

model是表单的数据对象，一般把一个表单所有的双向绑定的值封装在一个对象中，然后通过v-bind：model来绑定.

rules是规则验证的对象，规则验证对象的键名要和model中绑定数据对象的键名一样，如果不一样的话表单验证会出问题，因为需要通过prop属性来绑定验证的规则和验证监听的数据，这也是我踩过最多的坑

2.ref

ref是用来获取dom的，我们需要通过获取dom来对表单进行进一步的操作

<el-form :model="editorForm" ref="editorForm" :rules="rules">
      <el-form-item prop="temType">
        <template v-slot:label>
          <div class="label">模板类型</div>
        </template>
        <el-input v-model="editorForm.temType"></el-input>
      </el-form-item>
      <el-form-item prop="">
        <template v-slot:label>
          <div class="label">模板名称</div>
        </template>
        <el-input v-model="editorForm.temName"></el-input> </el-form-item
      ><el-form-item prop="">
        <template v-slot:label>
          <div class="label">区域类型</div>
        </template>
        <el-input
          v-model="editorForm.regType"
          autocomplete="off"
        ></el-input> </el-form-item
      ><el-form-item prop="">
        <template v-slot:label>
          <div class="label">巡检周期</div>
        </template>
        <el-input
          v-model="editorForm.inspectPeriodType"
          autocomplete="off"
        ></el-input> </el-form-item
      ><el-form-item prop="">
        <template v-slot:label>
          <div class="label">巡检方式</div>
        </template>
        <el-input v-model="editorForm.inspectModeType"></el-input>
      </el-form-item>
      <el-form-item prop="">
        <template v-slot:label>
          <div class="label">设备类型</div>
        </template>
        <el-input
          v-model="editorForm.deviceType"
          autocomplete="off"
        ></el-input> </el-form-item
      ><el-form-item prop="">
        <template v-slot:label>
          <div class="label">表单名称</div>
        </template>
        <el-input v-model="editorForm.formName"></el-input>
      </el-form-item>
    </el-form>

 data() {
    return {
      editorForm: {
        temType: "",
        temName: "",
        regType: "",
        inspectPeriodType: "",
        inspectModeType: "",
        deviceType: "",
        formName: "",
        creatTime: "",
        updataTime: "",
        creater: "1",
        updataer: "1",
      },
      rules: {
        temType: [
          {
            required: true,
            message: "模板类型不能为空",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },

设置后就是这样