IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> el-form的rules如何校验多层嵌套对象 -> 正文阅读

[JavaScript知识库]el-form的rules如何校验多层嵌套对象

el-form的表单校验,通常情况下,都是在校验第一层对象时使用

例如:

<el-form ref="form" :model="postData" :rules="rules" class="common-form" label-width="118px" size="mini">
   <el-row>
     <el-col :span="12">
       <el-form-item prop="custType" label="客户属性">
         <el-radio-group v-model="postData.custType" @change="changeCustomerType">
           <el-radio label="直属客户">直属客户</el-radio>
           <el-radio label="代理商">代理商</el-radio>
         </el-radio-group>
       </el-form-item>
     </el-col>
     <el-col :span="12">
       <el-form-item label="客户名称" class="hintparent" prop="custId">
         <el-select
           v-model="postData.custId"
           placeholder="请选择"
         >
           <el-option
             v-for="item in customers"
             :key="item.id"
             :label="item.cname"
             :value="item.id"
           ></el-option>
         </el-select>
       </el-form-item>
     </el-col>
  <el-row>
</el-form>

数据结构为:

postData: {
  custType: '',
  custId: '',
},

校验规则为

rules: {
  custType: [{ required: true, message: '请选择客户属性', trigger: 'change' }],
  custId: [{ required: true, message: '请选择客户名称', trigger: 'change' }]
}

注意到 prop里的名称和属性名和rules里的检验字段名需保持一致。

现有一段数据结构如下:

postData: {
	stamp: {
       person: null,
       tel: null,
       reason: null
    }
}

当数据嵌套到两层时,校验第二层的数据时,可以这么做

<el-form-item
	 prop="stamp.concatPerson"
	 label="联系人"
	 :rules="{ required: postData.stamp.needPost === 0, message: '请填写联系人', trigger: 'change' }"
	>
	 <el-input v-model="postData.stamp.concatPerson"></el-input>
</el-form-item>
<el-form-item
	 v-if="postData.stamp.needPost === 0"
	 prop="stamp.tel"
	 label="联系电话"
	 class="hintparent"
	 :rules="[
	   { required: postData.stamp.needPost === 0, message: '请填写联系电话', trigger: 'change' },
	   {
	     pattern: /^[\d\-]+$/,
	     message: '电话格式不正确',
	     trigger: 'change'
	   },
	   { max: 20, message: '电话格式不正确', trigger: 'change' }
	 ]"
	>
	 <el-input v-model="postData.stamp.tel"></el-input>
</el-form-item>
<el-form-item prop="stamp.reason" label="盖章原因" class="hintparent">
	 <el-input
	   v-model="postData.stamp.reason"
	   maxlength="2000"
	   show-word-limit
	   type="textarea"
	   :autosize="{ minRows: 4 }"
	   :rules="[
	     { required: true, message: '请填写盖章原因', trigger: 'change' },
	     { max: 2000, message: '最多只能输入2000个字', trigger: 'change' }
	   ]"
	 ></el-input>
</el-form-item>

此时props传的是去掉最外层之后的嵌套对象,rules写在组件内部,没有拎出来的原因是因为我需要判断required的值,而在data()里获取不到this会报错。
在不需要做我这种判断时,也可以拎出来,写法如下

//第一种方式
stamp: {
	 reason: [
	    { required: true, message: '请填写盖章原因', trigger: 'change' },
	    { max: 2000, message: '最多只能输入2000个字', trigger: 'change' }
	  ]
}
//第二种方式
'stamp.reason': [
	  { required: true, message: '请填写盖章原因', trigger: 'change' },
	  { max: 2000, message: '最多只能输入2000个字', trigger: 'change' }
]

两种方式差不多,第二种比较简洁,第一种在嵌套对象比较多时可读性更高
开发中需要注意的是,需要初始化嵌套层级多的数据的n-1层,不然会报错哦,比如这里就需要初始化:postData.stamp: {},
如果是postData.stamp.my.reason,就需要初始化到postData.stamp.my: {}

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-18 17:32:01  更:2022-05-18 17:33:52 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 20:03:45-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码