iView中Form表单的验证（自定义验证、动态增减项验证）

在使用 iView框架做后台管理系统重构，碰到一个能使用到多种验证场景的配置页面，记录一下各种验证方式

• 【页面】
  
• 【重点代码】

<template>
	<div style="max-height: 500px; overflow: scroll;">
    <Form ref="createForm" :model="newConfig" :rules="ruleValidate" label-width="150">
      <FormItem label="名称" prop="name">
        <Input v-model="newConfig.name" maxlength="100" />
      </FormItem>
      <!-- 4.动态增减的表单项集合 —— 【对象数组】 -->
      <Card dis-hover v-for="(item, index) in newConfig.rules" :key="'o-' + index">
        <p slot="title">规则</p>
        <div slot="extra">
          <Button type="primary" icon="md-add" @click="addRule" class="multiBtnsSpace" v-if="index == newBusi.rules.length - 1"></Button>
          <Button type="error" icon="md-remove" @click="removeRule(index)" v-if="newBusi.rules.length > 1"></Button>
        </div>
        <FormItem label="No." :prop="'rules.' + index + '.index'" :rules="dynamicRules.index">
          <Input v-model="item.index" />
        </FormItem>
        <!-- ！！！重点：动态增减项的 prop：数组变量名 + 遍历索引 + 元素属性名 -->
        <FormItem label="协议" :prop="'rules.' + index + '.protocol'" :rules="dynamicRules.protocol">
          <Select v-model="item.protocol">
            <Option v-for="o in protocolOptions" :value="o.id" :key="`o-${o.id}`">{{ o.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="IP" :prop="'rules.' + index + '.ip'" :rules="dynamicRules.ip">
          <Input v-model="item.ip" />
        </FormItem>
        <!-- 根据 v-if条件展示的 FormItem需要加上key，避免显示出来时，复用原有的 DOM导致原先位置的 报错信息仍然存在 -->
        <!-- 一个配置项中包含多个参数时，可以对外层的 FormItem加 required属性，仅用于页面上能展示出必填的符号 *，真正的数据校验，是针对内部各个 FormItem各自做校验 -->
        <FormItem label="Port" v-if="item.protocol == 3 || item.protocol == 4" required :key="'port-' + index">
          <Row :gutter="5">
            <iCol span="7">
              <FormItem :prop="'rules.' + index + '.portType'" :rules="dynamicRules.portType">
                <Select v-model="item.portType" @on-change="changePortType('src', index)">
                  <Option v-for="o in compareOptions" :value="o.id" :key="`o-${o.id}`">{{ o.name }}</Option>
                </Select>
              </FormItem>
            </iCol>
            <iCol span="7">
              <FormItem :prop="'rules.' + index + '.port'" :rules="dynamicRules.port">
                <Input v-model="item.port" />
              </FormItem>
            </iCol>
            <iCol span="1" style="text-align: center;" v-if="item.portType== 4">
              -
            </iCol>
            <iCol span="7">
              <FormItem :prop="'rules.' + index + '.port2'" v-if="item.portType== 4" :rules="dynamicRules.port2">
                <Input v-model="item.port2" />
              </FormItem>
            </iCol>
          </Row>
        </FormItem>
      </Card>
    </Form>
	</div>
</template>

<script>
	export default {
		name: "create",
		data () {
			return {
		        newConfig: {
		          name: '',
		          rules: [ // 这个参数是一个数组，页面有 + - 按钮动态增减数组中的元素项
		            {
		              index: '',
		              protocol: '',
		              ip: '',
		              portType: '',
		              port: '',
		              port2: '', // 范围的第二个值
		            }
		          ]
		        }
			}
    },
    computed: {
      // 非动态部分校验
      ruleValidate() {
        return {
          name: [
            // 1.普通校验--必填 required
            { required: true, message: '必填项', trigger: 'blur' },
            // 1.普通校验--字符长度 max
            { type: 'string', max: 100, message: '文字长度超出限制', trigger: 'blur' }
          ]
        }
      },
      // 动态部分校验
      dynamicRules() {
        return {
          ...
          srcPort: [
            // 2.正则校验 pattern
            { pattern: /^[0-9]|[1-9]([0-9]{1,3})|[1-5]([0-9]{1,4})$/, message: '字段格式错误', trigger: 'blur' },
            // 3.自定义校验 validator
            { validator: this.validateCustom, trigger: 'blur' }
          ],
          ...
        }
      }
    },
		methods: {
      // 3.自定义校验 方法
      validateCustom(rule, value, callback) {
        if (/*错误条件*/) {
          // 错误 -- 调用 callback()方法，传入报错信息
          callback('报错信息');
        } else {
          // 无错误 --调用 callback()方法，不传参数
          callback();
        }
      }
    }
	}
</script>

• 【动态增减项校验中的 prop】
  
• 【一个配置项中包含多个参数】