实现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 相关文章推荐
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
JavaScript数组的5种迭代方法
Sep 29 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
深入浅析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清除bom示例
2014/03/03 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
node.js的事件机制
2017/02/08 Javascript
js模拟微博发布消息
2017/02/23 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
原生js实现无缝轮播图
2020/01/11 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
Python中的jquery PyQuery库使用小结
2014/05/13 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
python去掉空白行的多种实现代码
2018/03/19 Python
python调用摄像头拍摄数据集
2019/06/01 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
PIL.Image.open和cv2.imread的比较与相互转换的方法
2020/06/03 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
大专会计自我鉴定
2014/02/06 职场文书
旅游文化节策划方案
2014/06/06 职场文书
python自动化测试之Selenium详解
2022/03/13 Python
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript