vue项目引入外部js校验规则

场景：我们在写vue项目时，难免会遇见各种校验，如果都写在当前组件页面的时候，会增大页面体积，并且也不美观，所以我们可以将校验的规则整理在公共的js文件中，如果哪个页面需要，就去调用对应的页面

第一步：创建校验的js文件，并编写对应的代码

//手机号码或固定电话
export function validatePhTelNumber(str) {
    const reg = /^((\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14})|([1][3,4,5,6,7,8,9][0-9]{9})$/
    return reg.test(str)
}
//固定电话
export function validateTelephone(rule,value,callback) { 
    const reg = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/
    if(!reg.test(value)){
      callback(new Error('请输入正确的固话'))
    }else{
      callback()
    }
}
//手机号
export function validatePhoneNumber(str) {
    const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
    return reg.test(str)
}
//电子邮箱
export function validateEmail(str) {
    const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
    return reg.test(str)
}
//邮编
export function validateZipCode(str) {
    const reg = /^[1-9][0-9]{5}$/
    return reg.test(str)
}
//身份证
export function validateIDCard(str) {
    const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    return reg.test(str)
}
//银行卡号
export function validateBank(str) {
    const reg = /^([1-9]{1})(\d{14}|\d{18}|\d{15})$/
    return reg.test(str)
}
//变量
export const obj = {
    baseUrl:"https://www.baidu.com"
}

第二步：创建组件页面并导入校验js文件

import {validateEmail,validatePhoneNumber,validateIDCard,obj} from '../../utils/check'

第一种校验方法（只做简单的打印校验）

data(){
    return{
        phone:'18220506781',
        email:'1185407601@qq.com',
        idCard:''
    }
}

mounted(){
    console.log('手机号验证',validatePhoneNumber(this.phone))
    console.log('邮箱验证：',validateEmail(this.email))
    console.log('验证身份证号：',validateIDCard(this.idCard))
}

        结果如下：

 

 第二种校验方法（配合ElementUI表单验证） 

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="身份证号" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
        </el-form>

<script>
import {validateEmail,validatePhoneNumber,validateIDCard,obj} from '../../utils/check'
export default {
    data(){
        var idCards = (rule, value, callback) =>{
            var isCardType = validateIDCard(value)
            if(!isCardType){
                callback(new Error('身份证号格式不正确'))
            }else{
                callback()
            }
        }
        return{
            phone:'18220506781',
            email:'1185407601@qq.com',
            idCard:'',
            ruleForm:{
                name:''
            },
            rules:{
                name: [
                    { required: true, message: '身份证号不能为空', trigger: 'blur' },
                    { validator:idCards, trigger: 'blur' }
                ],
            }
        }
    },
    created(){

    },
    mounted(){
        console.log('手机号验证',validatePhoneNumber(this.phone))
        console.log('邮箱验证：',validateEmail(this.email))
        console.log('验证身份证号：',validateIDCard(this.idCard))
        console.log('引入的公共域名：',obj.baseUrl)
    },
    methods:{

    }
}
</script>

效果如下：

 

 

到这就完成了vue项目引入外部校验的js文件(*^▽^*)