前言
在vue项目中我们经常会将一些功能相似且又常用方法疯转在同一个js文件汇总，这样可以方便项目修改、维护、升级和代码复用。
比如我们常用的注册功能，就需要大量的校验工作，为防止用户误操作、填写错误数据或者恶意提交数据等现象的发生，我们通常会在前端对用户输入的数据进行必要校验以确保数据有效性，为了方便我们通常将其正和岛一个js方便使用时调用。
外部文件引用
export导出函数
这里我们定义了validation.js 文件用来定义常用校验方法，为了让该文件能被其他的vue组件所调用，我们需要用export 命令将这个函数抛出，这时候才能在组件中通过 import命令引入外部js定义的函数，导出函数可以有多重定义方式，下面是常用3中写法。
//手机号码校验 写法一
let Phone = function(value) {
const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
return reg.test(value)
}
//邮箱校验 写法二
let Email = function(value) {
const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
return reg.test(value)
}
//身份证验证 写法三
let IdCard = (value)=>{
const reg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
return reg.test(value)
}
module.exports 导出函数
如果你不喜欢上边这种，我们还可以使用module.exports 来导出函数，**module.exports **不同在于他返回的模块对象本身（在javascript里边是一个类），而exports返回的是模块函数，module.exports直接提供了暴露接口的方法。不需要在通过export命令将这个函数抛出，从diamante上可以看到module.exports 更佳简洁、方便.
module.exports = {
Phone(value) {
const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
return reg.test(value)
},
}
函数引用
在vue中函数引入方式分别是import 和require，这里我们直接引入外部js文件，然后再mounted中进行调用测试功能是否被实现。
<script>
import { Phone, Email, IdCard } from '@/utils/validation'
export default {
mounted () {
console.log(Phone("13576564567"))
console.log(Email("98766@qq.com"))
}
}
</script>
免费技术支持微信：15712862196
咨询QQ：2657535456
咨询微信号：huice666
慧测公众号
