最近我们公司将前端框架由easyui 改为 vue+elementui 。自学vue两周 就开始了爬坑之路。业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正,多多交流才能共同进步!

1.问题 我们公司的项目比较大 表格 表单的页面都不胜数 ,基于此封装了一些 可复用的代码。

2.分析  vue给了我们不一样的前端代码体验  element ui 给我们一套功能强大的组件 减少了我们大量的开发时间 。双剑合璧 天下无敌!  但每个公司的代码风格不同  用户的要求也比较刁端 ui团队设计完美 我们怎样才能用这个两把剑闯出自己的江湖 就需要大家好好琢磨了。

废话不多说!进入正题

form表单验证规则的封装 

1.ellementui的处理    1. Form 组件上一次性传递所有的验证规则  2 .单个的表单域上传递属性的验证规则 。

 <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
]"
>
<el-input v-model="dynamicValidateForm.mobil"></el-input>
</el-form-item>
<el-form-item
label="姓名:"
prop="name"
:rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
<el-input v-model="dynamicValidateForm.name"></el-input>
</el-form-item>
<el-form-item label="手机号:" prop="mobil"
:rules="filter_rules({required:true,type:'mobile'})">
<el-input v-model="dynamicValidateForm.mobil"></el-input>
</el-form-item> </el-form>

观察上面的代码 有一个共性 单个的表单域上传递属性的验证规则 ,给rules 属性一个数组

重点来了 19行代码是什么意思????

 这就是我们封装的全局可复用的方法   传入需要的参数,你就可以得到你想要的验证规则 rules 数组

在我们的工具包建一个 js文件  我们的全局方法就有了

 exports.install = function (Vue, options) {

     Vue.prototype.filter_rules = function (item){   

         return  [{},{}]

      }

 }    

还要在main.js 中注册 

下面分享下我的js文件

 import { validateMoneyNumber,qq,mobile,regexn,integer} from '@/utils/validate'

 exports.install = function (Vue, options) {

     /**
* 注意: 定义type 规则时 不用做非空验证
* 只需要传入 required:true 即可
* */
/*保留两位小数*/
const isvalidateMoney = (rule, value, callback) => {
if(value != null && value != "") {
if(!validateMoneyNumber(value)) {
callback(new Error('请输入正确的数字,最多保留两位小数!'))
} else {
callback()
}
}
else{
callback();
}
}
/*验证QQ号码*/
const isvalidateQQ= (rule, value, callback) => {
if(value != null && value != "") {
if(!qq(value)) {
callback(new Error('您输入的QQ号不正确!'))
} else {
callback()
}
}
else{
callback();
}
}
/*验证手机号*/
const isvalidateMobile= (rule, value, callback) => {
if(value != null && value != "") {
if(!mobile(value)) {
callback(new Error('您输入的手机号不正确!'))
} else {
callback()
}
}
else{
callback();
}
} /*含有非法字符(只能输入字母、汉字)*/
const isvalidateRegexn= (rule, value, callback) => {
if(value != null && value != "") {
if(!regexn(value)) {
callback(new Error('含有非法字符(只能输入字母、汉字)!'))
} else {
callback()
}
}
else{
callback();
}
}
/*请输入正整数*/
const isvalidateInteger= (rule, value, callback) => {
if(value != null && value != "") {
if(!integer(value)) {
callback(new Error('请输入正整数!'))
} else {
callback()
}
}
else{
callback();
}
} /**
* 参数 item
* required true 必填项
* maxLength 字符串的最大长度
* min 和 max 必须同时给 min < max type=number
* type 手机号 mobile
* 邮箱 email
* 网址 url
* 各种自定义类型 定义在 src/utils/validate 中 持续添加中.......
* */ Vue.prototype.filter_rules = function (item){
let rules = [];
if(item.required){
rules.push({ required: true, message: '该输入项为必填项!', trigger: 'blur' });
}
if(item.maxLength){
rules.push({ min:1,max:item.maxLength, message: '最多输入'+item.maxLength+'个字符!', trigger: 'blur' })
}
if(item.min&&item.max){
rules.push({ min:item.min,max:item.max, message: '字符长度在'+item.min+'至'+item.max+'之间!', trigger: 'blur' })
}
if(item.type){
let type = item.type;
switch(type) {
case 'email':
rules.push({ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' });
break;
case 'qq':
rules.push( { validator: isvalidateQQ, trigger: 'blur,change' });
break;
case 'mobile':
rules.push( { validator: isvalidateMobile, trigger: 'blur,change' });
break;
case 'regexn':
rules.push( { validator: isvalidateRegexn, trigger: 'blur,change' });
break;
case 'integer':
rules.push( { validator: isvalidateInteger, trigger: 'blur,change' });
break;
default:
rule.push({});
break;
}
} return rules;
};
};

看明白了吗  第一行  是引入各种正则表达式   然后自定义校验规则    。  传入你自定义的参数 就可以拿到你想要的规则   (很熟悉吧  参考 easyui 表单验证)

下面是效果

欢迎来交流哦!

 

  

vue elementui form表单验证的更多相关文章

  1. vue element-UI Form表单验证

    摘自官网 https://element.eleme.cn/#/zh-CN/component/form 保证prop的值等于v-model的值,并且初始化值,这样验证才好使. 可以自定义验证 < ...

  2. element-ui Form表单验证

    element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索, ...

  3. elementUI form表单验证不通过的原因

    <el-form :model="form" :rules="rules"> <el-form-item prop="input&q ...

  4. Vue中Form表单验证无法消除验证问题

    iView的表单api给出了一个resetFields方法,用于重置整个表单输入的内容并清除验证提示. 但是有时候需要只消除部分的iview的resetFields方法源码是这样的resetField ...

  5. elementUI form表单验证不通过的三个原因

    <el-form :model="form" :rules="rules"> <el-form-item prop="input&q ...

  6. django之form表单验证

    django中的Form一般有两种功能: 输入html 验证用户输入 #!/usr/bin/env python # -*- coding:utf- -*- import re from django ...

  7. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  8. python_way day19 HTML-day5 (form表单验证,CSRF,cookie,session,缓存)

    python-way day19 1. dJango的form表单验证 2.CSRF 跨站请求伪造 3.cookie,session 4.缓存 一,django表单验证功能 1.django验证基础: ...

  9. form表单验证2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Python 简单网页爬虫学习

    #coding=utf-8 # 参考文章: # 1. python实现简单爬虫功能 # http://www.cnblogs.com/fnng/p/3576154.html # 2. Python 2 ...

  2. java面试题7

    1.重载和重写的区别? 重载(Overload):(1)方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型.重载Overloading是一个类中多态性 ...

  3. prisma 集成tidb 安装试用

    以前官方提供的ansible 的脚本,现在有了docker的版本,可以方便测试使用 实际完整配置参考 https://github.com/rongfengliang/prisma-tidb 安装ti ...

  4. Spring Could与Dubbo、Docker、K8S

    如果你是在一个中小型项目中应用Spring Cloud,那么你不需要太多的改造和适配,就可以实现微服务的基本功能.但是如果是在大型项目中实践微服务,可能会发现需要处理的问题还是比较多,尤其是项目中老代 ...

  5. RabbitMQ 概念与Java例子

    RabbitMQ简介 目前RabbitMQ是AMQP 0-9-1(高级消息队列协议)的一个实现,使用Erlang语言编写,利用了Erlang的分布式特性. 概念介绍: Broker:简单来说就是消息队 ...

  6. Python——内置函数(待完善)

    内置函数(68个),分为六大类 思维导图: 1. 迭代器/生成器相关(3个) (1)range for i in range(10): #0-9 print(i) for i in range(1,1 ...

  7. GCC参数详解 二

    1简介 2简单编译 2.1预处理 2.2编译为汇编代码(Compilation) 2.3汇编(Assembly) 2.4连接(Linking) 3多个程序文件的编译 4检错 5库文件连接 5.1编译成 ...

  8. emacs之配置自动安装脚本

    emacsConfig下建立install目录,结构大概这样 . ├── auto-complete-etags-setting.el ├── auto-complete-setting.el ├── ...

  9. [DP题]吃糖果

    1944:吃糖果 总时间限制:1000ms内存限制:65536kB 描述 名名的妈妈从外地出差回来,带了一盒好吃又精美的巧克力给名名(盒内共有 N 块巧克力,20 > N >0).妈妈告诉 ...

  10. 操作数据类m

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...