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 Object的extend是一个常用的功能
Dec 02 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
基于jquery的文章中所有图片width大小批量设置方法
Aug 01 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
使用console进行性能测试
Apr 27 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
layui 表单标签的校验方法
Sep 04 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
php IP及IP段进行访问限制的代码
2008/12/17 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP常用的小程序代码段
2015/11/14 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
python中类的一些方法分析
2014/09/25 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python 修改列表中的元素方法
2018/06/26 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Python调用飞书发送消息的示例
2020/11/10 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js
Python循环之while无限迭代
2022/04/30 Python
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers