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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
PHP默认安装产生系统漏洞
2006/10/09 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
Python单链表的简单实现方法
2014/09/23 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
python基础教程之五种数据类型详解
2017/01/12 Python
python学习教程之使用py2exe打包
2017/09/24 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
优秀少先队员主要事迹材料
2014/05/28 职场文书
计算机专业求职信
2014/06/02 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
致运动员加油稿
2015/07/21 职场文书
高三生物教学反思
2016/02/22 职场文书