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

网络编程 2024/12/31 佚名

3 1 2

使用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' "color: #ff0000">使用


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


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




怎么配置到全局

  通过mixin配置，然后在页面中使用(个人使用的是mixin)
  配置为全局方法在页面中调用
  挂在到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' "color: #ff0000">最后


在项目的系统管理模块中可以看到示例代码：
项目地址
项目代码地址
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

elementUI表单全局验证,element,全局验证

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“实现elementUI表单的全局验证的方法步骤”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月31日

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

Node.js如何优雅的封装一个实用函数的npm包的方法

深入浅析Vue 中 ref 的使用

评论“实现elementUI表单的全局验证的方法步骤”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接