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 AspxButton的客户端操作
Jun 26 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
Ant design vue中的联动选择取消操作
Oct 31 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
PHP基础知识回顾
2012/08/16 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
js快速排序的实现代码
2013/12/08 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
python实现简单银行管理系统
2019/10/25 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
如何选择使用结构还是类
2014/05/30 面试题
Lucene推荐的分页方式是什么?
2015/12/07 面试题
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
动物科学专业毕业生的自我评价
2013/11/29 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python