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

最新推荐文章于 2025-04-10 23:30:00 发布

原创

最新推荐文章于 2025-04-10 23:30:00 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #view design #前端

该文章展示了一个使用iview组件库创建的Vue.js表单，通过动态设置规则来实现审核结果与备注字段验证的交互。当审核结果为通过时，备注非必填；若为驳回，则备注变为必填。表单验证在提交时触发，确保数据完整性。

1.实现效果

2.实现原理

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

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

3.实现代码

<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">审核通过</Option>