实现elementUI表单的全局验证的方法步骤


Posted in Javascript onApril 29, 2019

使用ElementUi搭建框架的时候,大家应该都有考虑过怎么做全局验证,毕竟复制粘贴什么的是最烦了,这里分享下个人的解决方法。

验证规则

分析规则

一般验证规则,主要是是否必填,不为空,以及参数类型的验证。 基于这个条件,我们开始找找思路, 单个字段的验证是这样的:

name: {
 required: 是否必填,
 validator: 自定义规则,
 message: 失败提示消息(非自定义时触发),
 trigger: 触发方式
}

循环实现

固定的规则。当一个东西固定之后,那必然是可以重复使用的,并且可以快速生成,我们可以用循环来实现它。 但是用循环来实现,我们则需要一个数据规则。

定义数据规则

分析下需要的字段,大概就是以下几种,其他的可以根据自身的需求去增加:

  • 验证的字段名 label
  • 验证的值 value
  • 验证的类型 type
  • 是否必填 required
  • 自定义规则 validator

那最终我们得到的是这样一个字段配置列表:

fieldList: [
   {label: '账号', value: 'account', type: 'input', required: true, validator: checkAccount},
   {label: '密码', value: 'password', type: 'password', required: true, validator: checkPwd},
   {label: '昵称', value: 'name', type: 'input', required: true},
   {label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true},
   {label: '头像', value: 'avatar', type: 'slot', className: 'el-form-block'},
   {label: '手机号码', value: 'phone', type: 'input', validator: checkPhone},
   {label: '微信', value: 'wechat', type: 'input', validator: checkWechat},
   {label: 'QQ', value: 'qq', type: 'input', validator: checkQQ},
   {label: '邮箱', value: 'email', type: 'input', validator: checkEmail},
   {label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block'},
   {label: '状态', value: 'status', type: 'select', list: 'statusList', required: true}
  ]

form完整的字段配置建议参考:

formInfo: {
  ref: null,
  data: {
   id: '', // *唯一ID
   account: '', // *用户账号
   password: '', // *用户密码
   name: '', // *用户昵称
   type: 2, // *用户类型: 0: 手机注册 1: 论坛注册 2: 管理平台添加
   sex: 0, // *性别: 0:男 1:女
   avatar: '', // 头像
   phone: '', // 手机号码
   wechat: '', // 微信
   qq: '', // qq
   email: '', // 邮箱
   desc: '', // 描述
   status: 1 // *状态: 0:停用,1:启用(默认为1)',
   // create_user: '', // 创建人
   // create_time: '', // 创建时间
   // update_user: '', // 修改人
   // update_time: '' // 修改时间
  },
  fieldList: [
   {label: '账号', value: 'account', type: 'input', required: true, validator: checkAccount},
   {label: '密码', value: 'password', type: 'password', required: true, validator: checkPwd},
   {label: '昵称', value: 'name', type: 'input', required: true},
   {label: '性别', value: 'sex', type: 'select', list: 'sexList', required: true},
   {label: '头像', value: 'avatar', type: 'slot', className: 'el-form-block'},
   {label: '手机号码', value: 'phone', type: 'input', validator: checkPhone},
   {label: '微信', value: 'wechat', type: 'input', validator: checkWechat},
   {label: 'QQ', value: 'qq', type: 'input', validator: checkQQ},
   {label: '邮箱', value: 'email', type: 'input', validator: checkEmail},
   {label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block'},
   {label: '状态', value: 'status', type: 'select', list: 'statusList', required: true}
  ],
  rules: {},
  labelWidth: '120px'
  }

实现验证方法

一: 循环字段列表,根据type判断是提示选择不能为空,还是输入不能为空
二:如果字段必填,则根据是否有自定义验证去生成验证规则
三: 字段非必填,有自定义规则生成验证

// 初始化验证数据
 _initValidate (formInfo) {
  const obj = {},
  fieldList = formInfo.fieldList
  // 循环字段列表
  for (let item of fieldList) {
  let type = item.type === 'select' ? '选择' : '输入'
  if (item.required) {
   if (item.validator) {
   obj[item.value] = {
    required: item.required,
    validator: item.validator,
    trigger: 'blur'
   }
   } else {
   obj[item.value] = {
    required: item.required,
    message: '请' + type + item.label,
    trigger: 'blur'
   }
   }
  } else if (item.validator) {
   obj[item.value] = {
   validator: item.validator,
   trigger: 'blur'
   }
  }
  }
  formInfo.rules = obj
 }

使用

结合上面的字段设计,我在页面上的使用是这样的,大家可以根据自己的字段设计去修改,大致实现过程是这样的

// mixin中的方法, 初始化字段验证规则
this._initValidate(this.formInfo)

怎么配置到全局

  1. 通过mixin配置,然后在页面中使用(个人使用的是mixin)
  2. 配置为全局方法在页面中调用
  3. 挂在到vue实例上,通过this即可访问

mixins例子

export default {
 data () {
 /**
  * 页面上的可复用的验证规则
  */
 // 验证号码格式
 const CHECK_PHONE = (rule, value, callback) => {
  let check = this.$validate({label: '号码', value, rules: ['phone']})
  if (!check.result) {
  callback(new Error(check.message))
  } else {
  callback()
  }
 }
 // 验证号码格式以及不能为空
 const CHECK_PHONE_NOTNULL = (rule, value, callback) => {
  let check = this.$validate({label: '号码', value, rules: ['notnull', 'phone']})
  if (!check.result) {
  callback(new Error(check.message))
  } else {
  callback()
  }
 }
 // 检测邮箱格式
 const CHECK_EMAIL = (rule, value, callback) => {
  let check = this.$validate({label: '邮箱', value, rules: ['email']})
  if (!check.result) {
  callback(new Error(check.message))
  } else {
  callback()
  }
 }
 // 检测邮箱格式以及不能为空
 const CHECK_EMAIL_NOTNULL = (rule, value, callback) => {
  let check = this.$validate({label: '邮箱', value, rules: ['notnull', 'email']})
  if (!check.result) {
  callback(new Error(check.message))
  } else {
  callback()
  }
 }
 return {
  CHECK_PHONE,
  CHECK_PHONE_NOTNULL,
  CHECK_EMAIL,
  CHECK_EMAIL_NOTNULL
 }
 },
 methods: {
 // 初始化验证数据
 _initValidate (formInfo) {
  const obj = {},
  fieldList = formInfo.fieldList
  // 循环字段列表
  for (let item of fieldList) {
  let type = item.type === 'select' ? '选择' : '输入'
  if (item.required) {
   if (item.validator) {
   obj[item.value] = {
    required: item.required,
    validator: item.validator,
    trigger: 'blur'
   }
   } else {
   obj[item.value] = {
    required: item.required,
    message: '请' + type + item.label,
    trigger: 'blur'
   }
   }
  } else if (item.validator) {
   obj[item.value] = {
   validator: item.validator,
   trigger: 'blur'
   }
  }
  }
  formInfo.rules = obj
 }
 }
}

最后

在项目的系统管理模块中可以看到示例代码:

项目地址

项目代码地址

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

Javascript 相关文章推荐
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
jQuery大于号(>)选择器的作用解释
Jan 13 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
vue将文件/图片批量打包下载zip的教程
Oct 21 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 #Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 #Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 #Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 #Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 #Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 #Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 #Javascript
You might like
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
网站上面有这种切换效果
2006/06/26 Javascript
网页javascript精华代码集
2007/01/24 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
python中的列表推导浅析
2014/04/26 Python
python实现进程间通信简单实例
2014/07/23 Python
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
django修改models重建数据库的操作
2020/03/31 Python
Python流程控制语句的深入讲解
2020/06/15 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
运动会邀请函范文
2014/01/31 职场文书
家长对老师的感言
2014/03/11 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
死亡证明书样本说明
2014/10/18 职场文书
信息简报范文
2015/07/21 职场文书
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python