最近我们公司把前端框架从easyui改成了vue elementui。自学了两周vue，开始爬坑。在业余时间，我想和你分享我的经历。如果你是技术新手，第一次分享(有点兴奋)，欢迎你改正任何不足。只有通过更多的交流，你们才能一起进步！

1.问题我们公司的项目比较大，表单页面很多，所以封装了一些可重用的代码。

2.分析vue给了我们不同的前端代码体验。element ui为我们提供了一组强大的组件，这减少了大量的开发时间。两剑天下无敌！但是每个公司的代码风格不一样，用户的要求也相当尴尬。ui团队设计得非常完美。如何才能用这两把剑闯出自己的江湖，需要大家深思。

废话少说！进入正题

表单验证规则的封装

1.1.ellementui 1的处理。一次通过表单组件上的所有验证规则2。在单个表单字段上传递属性验证规则。

El-form : model=' dynamic validate form ' ref=' dynamic validate form ' label-width=' 100px ' class=' demo-dynamic ' El-form-itempur=' email ' label=' mailbox ' : r Ules='[{ required : true，message: '请输入电子邮件地址'，trigger: 'blur'}，{ type: ' email '，message3360 '请输入正确的电子邮件地址'，trigger trigger : ' blur ' }]' El-input v-model=' dynamicvalidateform . name '/El-input/El-form-itemel-form-item标签='手机号码： ' prop=' Mobil ' : rules=' filter _ rules({必选： true，Type : ' mobile ' })' El-input v-model=' dynamicvalidateform . Mobil '/El-input/El-form-item/El-form-form

19行代码是什么意思？

这是我们封装的全局可重用方法。传入所需的参数，您就可以获得所需的验证规则规则数组

在我们的工具包中创建一个js文件，我们将有一个全局方法

出口。install=function (vue，options) {vue。原型。filter _ rules=function(item){ return[{ }，{}]}}也应该在main.js中注册

在下面分享我的js文件

从@/utils/validate '导出。install=function(Vue，options) { /** *导入{ validateMoneyNumber，qq，mobile，regexn，integer}注意： 定义类型规则时不用做非空验证* 只需要传入需要：道即可* *//*保留两位小数*/const isvalidateMoney=(规则、值、回调)={ if(值！=空值！='') { if(！validateMoneyNumber(值)){回调（新错误('请输入正确的数字，最多保留两位小数！))} else { callback()} } else { callback()；} } /*验证即时通信软件号码*/const isvalidateQQ=(规则、值、回调)={ if(值！=空值！='') { if(！qq(值)){回调（新错误('您输入的即时通信软件号不正确！))} else { callback()} } else { callback()；} } /*验证手机号*/const isvalidateMobile=(规则、值、回调)={ if(值！=空值！='') { if(！移动（值)){回调（新错误('您输入的手机号不正确！))} else { callback()} } else { callback()；} } /*含有非法字符（只能输入字母、汉字)*/const isvalidateRegexn=(规则、值、回调)={ if(值！=空值！='') { if(！正则表达式（值)){回调（新的错误('含有非法字符（只能输入字母、汉字)!))} else { callback()} } else { callback()；} } /*请输入正整数*/const isvalidateInteger=(规则、值、回调)={ if(值！=空值！='') { if(！整数（值)){回调（新错误('请输入正整数！))} else { callback()} } else { callback()；} } /** * 参数项目*必需为真必填项*最大长度字符串的最大长度*分钟和最大必须同时给最小最大类型=数量*类型手机号移动*邮箱电子邮件*网址url *各种自定义类型定义在src/utils/validate中持续添加中.* */Vue。原型。filter _ rules=function(item){ let rules=[]；if(项目。必选){规则。push({必需的d : true，消息： '该输入项为必填项！触发器： ' blur ' })；} if(项。MaxLength){ rules。push({ min :1，max:item.maxLength，message: '最多输入item.maxLength '个字符！触发器： ' blur ' })} if(item。小型项目。max){规则。推送({最小：个项目。min，max:item.max，message: '字符长度在item.min '至item.max '之间！触发器： ' blur ' })} if(item。type){ let type=item。类型；switch(type){ case ' email ' :规则。推送({键入： '电子邮件，message: '请输入正确的邮箱地址，trigger: '模糊，改变' });打破；案例‘QQ’:规则。push({ validator :是validateqq，trigger: 'blur，change ' })；打破；案例'移动' :规则。push({ validator :是validate mobile，trigger: 'blur，change ' })；打破；case ' regex n ' :规则。push({ validator :是validateregexn，trigger: 'blur，change ' })；打破；case ' integer ' :规则。push({ validator :是validateinteger，trigger: 'blur，change ' })；打破；默认：规则。push({ })；打破；} }返回规则；};};看明白了吗第一行是引入各种正则表达式然后自定义校验规则。传入你自定义的参数就可以拿到你想要的规则（很熟悉吧参考程序表单验证)

下面是效果

元素用户规则表单验证

可以用模式写出规律性，配合elementUI进行表单验证。pattern属性指定用于验证输入字段的模式。模式指的是正则表达式。rule : { name :[{ required d : true，message: '请输入用户名'，trigger:' blur'}，{min: 2，max: 5，message3360 '长度为2到5个字符' }，{ pattern n :/[ u4e 00- u9 fa 5]$/，message: '用户名只能是中文' }/{ pattern n :{validator :函数(规则、值、回调){if (/1 [34578] d {9} $/。test (value)==false) {callback(新错误('请输入正确的手机号码')；} else { callback()；}}，trigger:' blur'}]，//pattern 3360/1[34578] d { 9 } $/，message3360 '目前只支持中国大陆的手机号码' } peopleid 3360[{ required d 3360 true。Message: '请输入身份证'，trigger:' blur'}，{ pattern 3360/( d { 15 } $)|( d { 18 } $)|( d { 17 }( d | x | x)$ carid :[{ required d : true，message: '请输入车牌号'，trigger:' blur'}，{ pattern :/([ u4e 00- u9fa5]{1}[a-z0-9]{6}$)|(^[a-z]{2}[a-z0-9]{2}[a-z0-9u4e00-u9fa5]{1}[a-z0-9]{4}$)|(^[u4e00-