vue中iview组件实现表单数据的动态校验

最新推荐文章于 2024-01-16 10:52:21 发布

原创

最新推荐文章于 2024-01-16 10:52:21 发布 · 1.3k 阅读

标签

#vue.js #前端

收录于

本文介绍了在Vue项目中利用iView的Form组件进行动态表单验证的方法。通过设置`ref`、`model`和`rules`属性，结合业务逻辑，实现了根据审核结果动态调整备注字段是否必填的验证规则。

1.实现原理

iview组件库Form表单， ref=“formValidate”，:model=“formInline”，:rules=“ruleValidate”。
选择审核结果的时候动态的设置备注的规则，当为通过为非必填，反之为必填。
为备注项设置相应的动态rule：

:rules="formInline.status == '2'? ruleValidate.remark: [{ required: false }]"

2.实现代码

<template>
  <div class="content">
    <Card>
      <p slot="title">表单动态校验</p>
      <Form
        :label-width="100"
        ref="formValidate"
        :model="formInline"
        :rules="ruleValidate"
      >
        <FormItem label="表单校验：" prop="status">
          <Select
            v-model="formInline.status"
            placeholder=""
          >
            <Option value="1">条件1</Option>
            <Option value="2">条件2</Option>
          </Select>
        </FormItem>
        <FormItem
          label=