vue elementui form表单验证的实现

最近我们公司将前端框架由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 规则时 不用做非空验证								 
 1/4    1 2 3 4 下一页 尾页