如何控制某个字段在一种情况下要验证，在另一种情况下不验证。

2023-12-20 13:42:58

效果：

当菜单类型为目录时当菜单类型为菜单时当菜单类型为按钮时

由上可知，上级菜单、菜单图标、菜单路由、页面路径在不同情况下，有时需要验证，有时不需要验证。

上代码：

<el-form-item label="菜单类型" prop="type">
                    <el-radio-group v-model="form.type">
                        <el-radio :label="0">目录</el-radio>
                        <el-radio :label="1">菜单</el-radio>
                        <el-radio :label="2">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="上级菜单" prop="parentId" :rules="form.type!=0?rules.parentId:[]">
                    <select-tree :props="props" :options="list" v-model="form.parentId" :clearable="isClearable"
                        :accordion="isAccordion" @getValue="getValue($event)" :isDisabled="isDisabled" ref="TreeSelect">
                    </select-tree>
                </el-form-item>
                <el-form-item label="菜单图标" prop="icon" :rules="form.type==0?rules.icon:[]">
                    <el-input v-model="form.icon" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="菜单路由" prop="path" :rules="form.type==1?rules.path:[]">
                    <el-input v-model="form.path" size="small" clearable></el-input>
                </el-form-item>
                <el-form-item label="页面路径" prop="page" :rules="form.type!=0?rules.page:[]">
                    <el-input v-model="form.page" size="small" clearable></el-input>
                </el-form-item>

要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: ‘请输入邮箱地址‘, trigger: ‘blur‘ },
      { type: ‘email‘, message: ‘请输入正确的邮箱地址‘, trigger: [‘blur‘, ‘change‘] }
    ]"
  >

根据form.type值的不同来控制字段是否需要验证

1）、当form.type的值为0时，上级菜单rules的值为空数组，即将数据模型中rules数组置空。菜单图标rules的值为rules.icon,菜单路由的rules的值置空，页面路径rules的值置空

2）、当form.type的值为1时，上级菜单rules的值为rules.parentId菜单图标rules的值置空,菜单路由的rules的值为rules.path，页面路径rules的值为rules.page

3）、当form.type的值为2时，上级菜单rules的值为rules.parentId菜单图标rules的值置空,菜单路由的rules的值置空，页面路径rules的值为rules.page

注意：rules的值置空表示单个表单域没有验证规则。rules的值为rules.icon，表示该表单域只有这个验证规则。

如何控制某个字段在一种情况下要验证，在另一种情况下不验证。

码农公寓

相关文章