vue + elementUI 各种form表单的校验

vue + elementUI form表单的校验

实际开发过程中,我们会遇到各种的form表单,比如:典型的form表单,也就是我们最常用用的也最多的一种,另外还有动态生产的表单,或者是在列表中的表单

首先是典型的form表单,其校验方式在element-UI中有详细的介绍,此处不再啰嗦

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  <el-form-item label="名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>

稍微复杂一点的比如循环循环生成的form表单

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
  <el-form-item
    v-for="(item, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="item.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
  </el-form-item>
</el-form>

数组中form表单的校验

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
  <el-table :data="detailForm.saleConverts">
    <el-table-column prop="umConvertName" label="名称">
      <template slot-scope="{ row, $index }">
        <el-form-item
          label-width="1"
          label=" "
          :prop="'saleConverts.' + $index + '.name'"
          :rules="[{
            required: true, message: '请输入名称', trigger: ['change', 'blur']
          }]"
        >
          <el-input v-model="row.name"></el-input>
        </el-form-item>
      </template>
    </el-table-column>
  </el-table>
</el-form>