在使用 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 == newConfig.rules.length - 1"></Button> <Button type="error" icon="md-remove" @click="removeRule(index)" v-if="newConfig.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】 【一个配置项中包含多个参数】