vue Form表单根据某一个字段值判断是否校验其他某些字段

最新推荐文章于 2024-07-04 10:40:16 发布

LBJsagiri

最新推荐文章于 2024-07-04 10:40:16 发布

阅读量585

点赞数

分类专栏：前端开发文章标签：前端 view design html

本文链接：https://blog.csdn.net/qq_40518071/article/details/132585618

版权

前端开发专栏收录该内容

16 篇文章 2 订阅

订阅专栏

Form表单根据某一个字段值判断是否校验其他某些字段

需求
- HTML代码

需求

在这里插入图片描述

如图，根据类型是“个人·”还是"企业·"分别有不同的校验规则
个人：需要校验名称、手机号码
企业：需要校验名称、联系人、联系号码

HTML代码

个人

<Row :gutter="32" v-show="isPerson">
              <Col span="6">
                <Form-item
                  label="业主名称"
                  prop="ownerName"
                  :rules="
                    isPerson
                      ? { required: true, message: '请输入业主名称' }
                      : {}
                  "
                >
                  <Input
                    clearable
                    v-model="ownerForm.ownerName"
                    placeholder="请输入业主名称"
                  ></Input>
                </Form-item>
              </Col>
              <Col span="6">
                <Form-item
                  label="手机号码"
                  prop="contactWay"
                  :rules="
                    isPerson
                      ? { required: true, message: '请输入手机号码' }
                      : {}
                  "
                >
                  <Input
                    clearable
                    v-model="ownerForm.contactWay"
                    placeholder="请输入手机号码"
                  ></Input>
                </Form-item>
              </Col>
       </Row>

企业

<Row :gutter="32" v-show="!isPerson">
              <Col span="6">
                <Form-item
                  label="公司名称"
                  prop="ownerName"
                  :rules="
                    !isPerson
                      ? { required: true, message: '请输入公司名称' }
                      : {}
                  "
                >
                  <Input
                    clearable
                    v-model="ownerForm.ownerName"
                    placeholder="请输入公司名称"
                  ></Input>
                </Form-item>
              </Col>
              <Col span="6">
                <Form-item
                  label="联系号码"
                  prop="contactNumber"
                  :rules="
                    !isPerson ? { required: true, message: '请输入联系号码' } : {}
                  "
                >
                  <Input
                    clearable
                    v-model="ownerForm.contactNumber"
                    placeholder="请输入联系号码"
                  ></Input>
                </Form-item>
              </Col>
            </Row>