实现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实现可拖动变色并关闭层窗口实例
May 15 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 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
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
JS实现self的resend
2010/07/22 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python制作简单的网页爬虫
2015/11/22 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
铲车司机岗位职责
2014/03/15 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
2014年文秘工作总结
2014/11/25 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
绵山导游词
2015/02/05 职场文书
周一给客户的问候语
2015/11/10 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
python 逐步回归算法
2021/04/06 Python
Golang并发工具Singleflight
2022/05/06 Golang
Redis 异步机制
2022/05/15 Redis
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技