介绍需求

熟悉并优化公司项目的第五天,领导说能不能把表单验证封装一下,我打开代码一看

由于是后台管理系统,无数个需要验证的输入框,由于截图长度受限,只能展示部分,类似于这种页面还有无数个!代码重复率非常高,难怪需要封装了。

实现思路

1.将代码从页面中抽离,在utils文件夹新建js文件存储

2.新增js代码

let FormValidate = (function () {
// eslint-disable-next-line
function FormValidate() {}
// From表单验证规则 可用于公用的校验部分
FormValidate.Form = function () {
return {
// 用户角色,姓名的验证规则
name: function (rule, value, callback) {
if (!value) {
return callback(new Error('用户角色不能为空'))
} else {
callback()
}
},
// 角色描述验证规则
description: function (rule, value, callback) {
if (!value) {
return callback(new Error('用户描述不能为空'))
} else {
callback()
}
},
}
}
return FormValidate
}())
exports.FormValidate = FormValidate

3.在页面中引入

附上代码:

// 自封装表单验证
import Format from "@/utils/FormValidation.js";

4.接下来,三方联动

HTML部分:

有三个非常重要的属性

1.model 表单数据对象

2.rules 表单验证规则

3.prop 表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的

js部分:

data(){
return{
//定义表单数据对象
rules: {
rolename: "",
description: "",
type: true,
},
//element 表格组件 表单验证规则
vailmsg: {
rolename: [
{
required: true,
validator: Format.FormValidate.Form().name,
trigger: "blur",
},
],
description: [
{
required: true,
validator: Format.FormValidate.Form().description,
trigger: "blur",
},
],
},
}
}

至此,封装表单验证结束,需要新的验证,直接去utils里的js新建然后导入页面引用即可!

更新优化:

实现传参,减少公共js代码过多

页面调用部分这样写:

Format.FormValidate.Form("用户角色不能为空").notEmpty,

公共js里这样写:

let FormValidate = (function () {
// eslint-disable-next-line
function FormValidate() {}
// From表单验证规则 可用于公用的校验部分
FormValidate.Form = function (errorMessage) {
// errorMessage 是我们传过来的提示文字 这样就可以一个验证多用 不用重复写
return {
// 输入框不为空的验证规则
notEmpty: function (rule, value, callback) {
console.log('e :>> ', errorMessage);
if (!value) {
return callback(new Error(errorMessage))
} else {
callback()
}
},
}
}
return FormValidate
}())
// 向外暴露内部变量
exports.FormValidate = FormValidate

如何在Vue的项目里对element的表单验证进行封装的更多相关文章

  1. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  2. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  3. react 项目实战(三)表单验证

    我们需要记录每一个字段当前的有效状态,有效时隐藏错误信息,无效时显示错误信息. 而这个有效/无效,可以在表单值改变的时候进行判断. 我们对/src/pages/UserAdd.js进行修改: 首先修改 ...

  4. vue踩坑:vue+ element ui 表单验证有值但验证失败。

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...

  5. element自定义表单验证

    element-ui框架下修改密码弹窗进行表单验证. 除了基础校验,密码不为空,长度不小于6字符,需求中还需校验密码由数字和字母组合. 处理代码如下: <el-dialog :visible.s ...

  6. vue iview modal弹出框 form表单验证

    一.ref="addApply" :model="addApply" :rules="ruleValidate"   不要忘记prop 二. ...

  7. Element Form表单实践(上)

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e8 ...

  8. 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法,日期转换和前台显示格式之间,还有JSON取日期数据格式转换成标准日期格式的问题

    项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...

  9. Vue项目之实现登录功能的表单验证!

    Vue项目之实现登录功能的表单验证! 步骤: 配置 Form表单验证; 1.必须给el-from组件绑定model 为表单数据对象 2 给需要验证的表单项 el-form-item 绑定 prop 属 ...

随机推荐

  1. 低代码平台--基于surging开发微服务编排流程引擎构思

    前言 微服务对于各位并不陌生,在互联网浪潮下不是在学习微服务的路上,就是在使用改造的路上,每个人对于微服务都有自己理解,有用k8s 就说自己是微服务,有用一些第三方框架spring cloud, du ...

  2. (Dubbo架构)基于MDC+Filter的跨应用分布式日志追踪解决方案

    在单体应用中,日志追踪通常的解决方案是给日志添加 tranID(追踪ID),生成规则因系统而异,大致效果如下: 查询时只要使用 grep 命令进行追踪id筛选即可查到此次调用链中所有日志,但是在 du ...

  3. [c++] 常犯错误

    更改变量值时想清楚对后面程序的影响 scnaf & == 数组下标从0开始 不赋初值导致的垃圾数据 全局flag和局部flag

  4. unrar命令解压rar unrar e XXX.rar (验证通过20200511)

    unrar命令解压rar 一个从入门到放弃再到改行的工程师 2018-05-02 17:53:04 3916 收藏展开压缩tar -cvf jpg.tar *.jpg //将目录里所有jpg文件打包成 ...

  5. Linux进阶之Linux中的标准输入输出

    Linux中的标准输入输出 标准输入0    从键盘获得输入 /proc/self/fd/0 标准输出1    输出到屏幕(即控制台) /proc/self/fd/1 错误输出2    输出到屏幕(即 ...

  6. linux 创建网桥

    由于最近项目需验证个问题,需求是要创建一个虚拟机网桥,在使用ifconfig命令查看时让docker0网桥不在第一个显示,因此,我们创建一个虚拟网桥让它排在第一位置 项目使用Centos7系统,因此使 ...

  7. Python小白的数学建模课-04.整数规划

    整数规划与线性规划的差别只是变量的整数约束. 问题区别一点点,难度相差千万里. 选择简单通用的编程方案,让求解器去处理吧. 『Python小白的数学建模课 @ Youcans』带你从数模小白成为国赛达 ...

  8. 『动善时』JMeter基础 — 34、JMeter接口关联【XPath提取器】

    目录 1.XPath提取器介绍 2.XPath提取器界面详解 3.XPath提取器的使用 (1)测试计划内包含的元件 (2)网易首页请求界面内容 (3)XPath提取器界面内容 (4)百度首页请求界面 ...

  9. python操作mongodb根据_id查询数据的实现方法

    python操作mongodb根据_id查询数据的实现方法   python操作mongodb根据_id查询数据的实现方法,实例分析了Python根据pymongo不同版本操作ObjectId的技巧, ...

  10. 在cuDNN中简化Tensor Ops

    在cuDNN中简化Tensor Ops 在Tesla V100 GPU中引入神经网络模型以来,神经网络模型已迅速利用NVIDIA Tensor Cores进行深度学习.例如,基于Tensor Core ...