写在前面：

在写前端项目时经常要用到校验函数，比如手机号校验，身份证校验，邮箱校验等等，并且多个表单页面都会用到，那么此时校验函数的复用性就非常重要了，本文就教大家如何将校验类函数封装在一个js文件里面实现全局的复用。

实现过程：

第一步：在utils文件夹下面新建一个checkTools.js如下：

第二步：编写checkTools.js,只需要将封装好的校验函数export default出去即可，也就是在export default下编写自己的校验函数，示例如下：

/**
 * 校验工具
 */
export default {
    /**
     * mobile 传入手机号/座机号
     * @param {String} mobile 
     * @returns {boolean}
     */
    checkPhone(mobile) {
        var tel = /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/;
        var phone = /^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[0-35-9]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0-35-9]\d{2}|6[2567]\d{2}|4(?:(?:10|4[01])\d{3}|[68]\d{4}|[579]\d{2}))\d{6}$/;
        // 校验手机号
        if (phone.test(mobile)) {
            console.log(mobile);
            return true;
        }
        // 校验座机号
        if (tel.test(mobile)) {
            console.log(mobile);
            return true;
        }
        return false
    },

后续省略，可以看我下一篇文章分享几种常见的校验方法...
}

第三步：在页面中使用，只需要两步即可使用，1.引入校验对象 2.编写校验后逻辑

1.引入校验对象

import checkTools from '../../utils/overall_modules/checkTool'

2.编写校验后逻辑，绑定表单校验，这里使用的是vant2的表单组件，只需要使用：rule标签即可绑定，如果没有用框架的话，可以使用@input标签进行绑定，以下是代码实例

//检查手机号是否正确
 validateFormNum() {
            if (!checkTools.checkPhone(this.telNum)) {
                // 手机号码校验失败
                // 处理校验失败的逻辑
                console.log("手机号校验失败")
                this.isCanSubmit = false
                Notify({ type: 'danger', message: '请输入正确的号码', duration: 1000 })
                Notify.clear
                return false

                
            } else {
                // 校验通过
                console.log("手机号校验成功")
                // if(this.){}
                this.isIdTelNumCorrect = true
                this.isCanSubmit = true
                if (this.isIdCardCorrect && this.isIdTelNumCorrect) {
                    this.isCanSubmit = true
                }
                Notify.clear
                return true
                // 处理校验通过的逻辑
            }


        },

<!-- 电话号码 -->

 <van-field required label="手机号" placeholder="请输入手机号码" v-model="telNum"
  :rules="[{ validator: validateFormNum, message: '请输入正确的手机号' }]" />

结语：

到这里你的校验函数就可以正常使用了，后续可以将所有的校验函数都封装到checkTools.js中，方便管理与维护，下一篇将和大家分享几种常用的校验函数...