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必须加引号,否则会因为包含点(.)报错

相关推荐
一只小风华~16 小时前
Vue: 侦听器(Watch)
前端·javascript·vue.js
JarvanMo16 小时前
Flutter Debug模式:每个开发者都需要的秘密武器(但大多数人用错了)
前端
玲小珑16 小时前
LangChain.js 完全开发手册(八)Agent 智能代理系统开发
前端·langchain·ai编程
蓝胖子的多啦A梦16 小时前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
掘金安东尼16 小时前
前端周刊431期(2025年9月8日–9月14日)
前端·javascript·github
风若飞17 小时前
npm ERR! code CERT_HAS_EXPIRED
前端·npm·node.js
北城笑笑17 小时前
NodeJS 8 ,从 0 到 1:npm 包发布与更新全流程指南( 含多场景适配与踩坑总结 )
前端·npm·node.js·github
Mike_jia17 小时前
如何找回Harbor密码
前端
码码哈哈0.017 小时前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
前端·npm·node.js
浩男孩17 小时前
🍀简简单单结合 hooks 优雅使用弹窗🚀🚀
前端