vue3中若v-model绑定的响应字段出现三级,该如何实现rules验证规则

比如以下内容:

配置的rules内容

javascript 复制代码
const rules=ref({
  title:[{required:true,message:"请输入标题",trigger:"blur"},{max:50,message:"最大不能超过256个字",trigger:"blur"}],
  Category:[{required:true,message:"请选择分类",trigger:"change"}],
  Province:[{required:true,message:"请选择省份",trigger:"change"}],
  City:[{required:true,message:"请选择城市",trigger:"change"}],
  content:[{required:true,message:"请输入内容",trigger:"blur"}]
});

由于分类中v-model绑定的是三级的字段:InformationForm.extraProperties.Category,

这在js中配置的是Category:[{required:true,message:"请选择分类",trigger:"change"}]

导致匹配不上,永远会报请选择分类的提示信息,那该如何做呢?

其实原因在于prop绑定的值要和v-model一致,即:prop="extraProperties.Category",

v-model="InformationForm.extraProperties.Category"不变,

最后js中配置的rules需要把验证的字段名配置成prop绑定的值即:extraProperties.Category

如下:

html 复制代码
<el-dialog
    v-model="dialogVisible"
    :title="Title"
    width="600px"
    :destroy-on-close="true"
  >
    <el-form :model="InformationForm" ref="formRef" :rules="rules" class="demo-form-inline">
      <el-form-item label="标题" prop="title">
        <el-input v-model="InformationForm.title" placeholder="请输入标题" :disabled="readOnly"/>
      </el-form-item>
      <el-form-item label="分类" prop="extraProperties.Category">
        <el-select v-model="InformationForm.extraProperties.Category" placeholder="请选择分类" :disabled="readOnly">
          <el-option
            v-for="item in categoryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="地区" prop="extraProperties.Province">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-select v-model="InformationForm.extraProperties.Province" placeholder="请选择省份" :disabled="readOnly" style="width: 240px" @change="provinceChange">
              <el-option
                v-for="item in provinceOptions"
                :key="item.text"
                :label="item.value"
                :value="item.text"
              />
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-select v-model="InformationForm.extraProperties.City" placeholder="请选择市/区" style="width: 240px" :disabled="readOnly" >
              <el-option
                v-for="item in cityOptions"
                :key="item.text"
                :label="item.value"
                :value="item.text"
              />
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <EditorInput v-model="InformationForm.content" :readOnly="readOnly"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>


<scripts>
const rules=ref({
  title:[{required:true,message:"请输入标题",trigger:"blur"},{max:50,message:"最大不能超过256个字",trigger:"blur"}],
  "extraProperties.Category":[{required:true,message:"请选择分类",trigger:"change"}],
  "extraProperties.Province":[{required:true,message:"请选择省份",trigger:"change"}],
  City:[{required:true,message:"请选择城市",trigger:"change"}],
  content:[{required:true,message:"请输入内容",trigger:"blur"}]
});
</scripts>

**注意:**js中的extraProperties.Category必须加引号,否则会因为包含点(.)报错

相关推荐
前端开发爱好者20 分钟前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者21 分钟前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
weixin_4569042742 分钟前
Vscode中开发VUE项目的调试方案
ide·vue.js·vscode
BillKu43 分钟前
容器元素的滚动条回到顶部
前端·javascript·vue.js
weixin_423391931 小时前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js
weixin_423391931 小时前
React Hooks 钩子
前端·javascript·react.js
CUGGZ1 小时前
第三代 React,怎么玩?
前端·javascript·react.js
星哥说事1 小时前
狂揽82.7k的star,这款开源可视化神器,轻松创建流程图和图表
前端
硅基宙宇AIGC1 小时前
阿里Qoder重磅登场:AI编程平台新王者,程序员的饭碗要换了吗?
前端
影i1 小时前
跨域登录 / Token 共享 踩坑记录
前端