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>