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

相关推荐
DoraBigHead5 分钟前
小Dora 的 JavaScript 修炼日记 · Day 1:变量三兄弟与作用域迷宫
前端·javascript·面试
年纪轻轻就扛不住9 分钟前
Express 入门指南(超详细教程)
前端·前端框架·node.js·express·js
Trust yourself24319 分钟前
easyui碰到想要去除顶部栏按钮边框
前端·javascript·easyui
一洽客服系统30 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead44 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛2 小时前
零一开源|前沿技术周报 #7
android·前端·ios