vue elementui form表单验证的实现


Posted in Javascript onNovember 11, 2018

最近我们公司将前端框架由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 中注册

vue elementui form表单验证的实现

下面分享下我的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表单验证的实现

ElementUi rules表单验证

  • 可以在pattern中书写正则,并且配合elementUI进行表单验证。
  • pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式。
rules: {
  name:[{
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
    },{
    min: 2,
    max: 5,
    message: '长度在 2 到 5 个字符'
    },{
    pattern: /^[\u4E00-\u9FA5]+$/,
    message: '用户名只能为中文'
  }
    //{ pattern:/^[a-zA-Z]w{1,4}$/, message: '以字母开头,长度在2-5之间, 只能包含字符、数字和下划线'}
  ],
  password: [{
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  }, {
    min: 6,
    max: 30,
    message: '长度在 6 到 30 个字符'
  }, {
    pattern: /^(\w){6,20}$/,
    message: '只能输入6-20个字母、数字、下划线'
  }],
  mobile:[{ 
    required: true,
    message: '请输入手机号码',
    trigger: 'blur'
  },
  {validator:function(rule,value,callback){
      if(/^1[34578]\d{9}$/.test(value) == false){
        callback(new Error("请输入正确的手机号"));
      }else{
        callback();
      }
    }, trigger: 'blur'}
  ],
  //  pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
  peopleID:[{
    required: true,
    message: '请输入身份证ID',
    trigger: 'blur'
    },{
      pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份证格式不正确' 
    }
  ],
  carId:[
    {required: true, message: '请输入车牌号', trigger: 'blur'}, 
    {pattern:/(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/,
     message: '常规格式:晋B12345'},
  ],
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
jQuery实现验证码功能
Mar 17 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 #Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 #Javascript
Vue项目引进ElementUI组件的方法
Nov 11 #Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 #Javascript
vue组件从开发到发布的实现步骤
Nov 11 #Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 #Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 #Javascript
You might like
php 引用(&amp;)详解
2009/11/20 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
vue 子组件修改data或调用操作
2020/08/07 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
深入理解Python中字典的键的使用
2015/08/19 Python
简单学习Python time模块
2016/04/29 Python
Python的Flask框架及Nginx实现静态文件访问限制功能
2016/06/27 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
tensorflow 变长序列存储实例
2020/01/20 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
static关键字的用法
2013/10/07 面试题
学前教育专业毕业生自荐信
2013/10/03 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
营销总经理岗位职责
2014/02/02 职场文书
会计学专业自荐信
2014/06/25 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python