vue2表单校验

50 阅读1分钟
  1. el-form标签上必须有 :model、ref、:rules 并且:model、ref的值必须是一样的
  2. el-form-item标签上必须有prop,并且prop的值与里面的标签v-model绑定的值的最后一个单词是一样的
  3. el-button标签上的点击事件必须传参并且加引号,传的值与:model、ref的值必须是一样的
 <el-form :model="registrationDate" label-width="auto" ref="registrationDate" :rules="rules">
        <!-- 代理商 -->
        <el-form-item label="代理商:" prop="agent">
          <el-select v-model="registrationDate.agent" class="m-2" placeholder="请选择代理商" size="large">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
         <el-form-item>
          <el-button type="primary" @click="onSubmit('registrationDate')" style="width: 222px;">提交</el-button>
        </el-form-item>
 </el-form>
// 提交
    onSubmit(registrationDate) {
      this.$refs[registrationDate].validate(validate => {
        if(validate) {
            // 调用接口
            this.$message.success('记录成功!')
        }
      })
    }