elementUI——el-form表单数据校验（包含数组循环）_element循环表单校验

一、普通的值类型的数据校验

• 设置 el-form-item 的 prop 值 与 formdata 中定义的 key 保持一致`
• 如果 rules 需要通过 el-form 统一设置，rules 的 key 定义也与 prop 保持一致（如果不一致，需要在 el-form-item 中 手动指定）
• 复杂的校验函数可通过 validator 单独定义

<el-form
  class="demo-form"
  :model="form"
  :rules="rules"
>
  <el-form-item label="数据库库名：" prop="database">
	 <el-input v-model="form.database" placeholder="请输入数据库库名"> </el-input>
  </el-form-item>
  <el-form-item label="数据表名称：" prop="sheet">
   	 <el-input v-model="form.sheet" placeholder="请输入数据表名称"> </el-input>
  </el-form-item>
</el-form>

<script>
import { Reg_w } from '@/utils/reg'
export default {
  data() {
	// 数据库表名校验
    let validatorSheet = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入数据表名称'))
      } else if (!Reg_w(value)) {
        callback(new Error('表名称仅支持字母数字下划线组合'))
      } else {
        callback()
      }
    }
    return {
      // 表单数据
      form: {
        // 数据表名称
        sheet: undefined,
        // 数据库库名
        database: undefined,
      },
      // 校验规则
      rules: {
        sheet: [{ required: true, validator: validatorSheet, trigger: 'blur' }],
        database: [{ required: true, message: '请输入数据库库名', trigger: 'blur' }],
      },
    }
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

二、表单数据为数组，数组循环中的每个字段需要校验

在上述使用方式的基础上，需要额外注意：

• prop 在循环中需要对应到 formdata 中 数组的某一项具体值，可以利用 index 等变量 进行锁定，再取到 具体的key
• v-model 结合循环正常使用
• el-form-item 的 rules 需要 手动指定

<el-form
  class="demo-form"
  :model="form"
  :rules="rules"
>
  <div v-for="(item, index) in form.fieldList" :key="item.id" class="sheet-item">
    <!-- 字段名称 -->
    <el-form-item :prop="`fieldList[${index}][field]`" :rules="rules.field_name">
      <el-input v-model="item.field" placeholder="请输入字段名"> </el-input>
    </el-form-item>
    <!-- 字段注释 -->
    <el-form-item :prop="`fieldList[${index}][comment]`" :rules="rules.field_comment">
      <el-input v-model="item.comment" placeholder="请输入字段注释"> </el-input>
    </el-form-item>
  </div>
</el-form>

<script>
export default {
  data() {
    return {
      // 表单数据
      form: {
        // 表单字段列表
        fieldList: [
		  //内部是这样的格式： { id: 1, field: '字段1', comment: '注释1' } 
		],
      },
      // 校验规则
      rules: {
        field_name: [{ required: true, message: '请输入字段名', trigger: 'blur' }],
        field_comment: [{ required: true, message: '请输入字段注释', trigger: 'blur' }],
      },
    }
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

欢迎留言，一起探索更多~