vue elementUI 表单校验的实现代码(多层嵌套)


Posted in Javascript onNovember 06, 2019

嵌套对象的校验

项目中使用的vue+elementUI进行开发,已经用了有一段时间了,感觉表单校验是每一个前端开发人员都避免不了的需求。在一些前端可以自行校验的情况下,先通过前端校验,校验不通过不发送请求,直到满足校验规则,再发送请求给后端,从而提升用户体验。

elementUI对表单的校验有自己的方法,要求传入model的必须为一个对象。但如果数据结构比较复杂,对象里面又嵌套对象,该如何校验?本文给出多层对象嵌套的方法。

example

<template>
 <el-form :model="formData" :rules="formRule" ref="formData" label-width="100px">
    <el-form-item prop="name" label="姓名">
      <el-input v-model="formData.name" ></el-input>
    </el-form-item>
    <el-form-item prop="password" label="密码">
     <el-input v-model="formData.password" ></el-input>
    </el-form-item>
    <el-form-item prop="user.tel" label="手机号" >
     <el-input v-model="formData.user.tel" ></el-input>
    </el-form-item>
    <el-form-item prop="phones[0].model" label="手机号">
     <el-input v-model="formData.phones[0].model"></el-input>
    </el-form-item>
    <el-form-item v-for="(phone, index) in formData.phones" :label="phone.brand" :key="phone.brand" :prop="'phones.' + index + '.model'" :rules="{
     required: true, message: 'model不能为空', trigger: 'blur'
     }">
      <el-input v-model="phone.model"></el-input>
      <el-form :model="formData.phones[index]" label-width="100px">
         <el-form-item v-for="(item, index1) in formData.phones[index].arr" :key="index1" :prop="'arr.' + index1 + '.data1'" label="data1" :rules="{
         required: true, message: 'data1不能为空', trigger: 'blur'
         }">
           <el-input v-model="item.data1"></el-input>
         </el-form-item>
      </el-form>
    </el-form-item>
  </el-form>
  <el-button @click="handleSubmit">提交</el-button>  
</template>
data () {
  return {
   formData:{
     name: '',
     password: '',
     user: {
       tel: ''
     },
      phones: [
       { brand: "华为", model: "", arr: [{ data1: "" }] },
       { brand: "小米", model: "", arr: [{ data1: "" }] }
     ] 
   },
   formRule:{
    name: [{required: true, message: '不能为空', trigger: 'blur'},
        {pattern: /^[\u4E00-\u9FA5]+$/, message: '用户名只能为中文', trigger: 'blur'}],
    password: [{required: true, message: '不能为空', trigger: 'blur'},
     {validator: Verify.validatePassword, trigger: 'blur'},
    ],
    'user.tel' : [{required: true, message: '手机号码不能为空', trigger: 'blur'}],
    'phones[0].model': [{required: true, message: 'model不能为空', trigger: 'blur'}],
   },
  }
 },

methods: {
  handleSubmit(){
    const t = this;
    t.$refs['formData'].validate((valid) => {
      if(valid){
       console.log(this.formData);
      }
    })
  }
 }

校验方法

model绑定的formData中内层user也是一个对象,现在想要对tel进行校验,在prop中传递user.tel,并且在rules中也要指定user.tel即可。

对于子对象里面又嵌套数组的数据结构,如果想校验数组里的元素,需要在写一层form,用子对象作为新form表单再重新走一遍流程即可,具体例子请看上面的代码

对于验证规则,可以通过pattern或者validator来实现,pattern里面可以直接写正则表达式,不知道为啥文档中没有提到这点。之前的验证一般都是通过validator来实现的,验证方法单独写在一个文件中,这样可以做到整个项目公用,用到时只需通过import引一下即可。

校验效果

vue elementUI 表单校验的实现代码(多层嵌套)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js同比例缩放图片的小例子
Oct 30 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue 解决computed修改data数据的问题
Nov 06 #Javascript
微信小程序页面渲染实现方法
Nov 06 #Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 #Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 #Javascript
对vuex中getters计算过滤操作详解
Nov 06 #Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 #Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 #Javascript
You might like
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
使用JavaScript switch case 另类写法
2010/03/14 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
python算法题 链表反转详解
2019/07/02 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
学校消防安全制度
2014/01/30 职场文书
求职信标题怎么写
2014/05/26 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
大连星海广场导游词
2015/02/10 职场文书
小学国庆节活动总结
2015/03/23 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
Python如何加载模型并查看网络
2022/07/15 Python
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL