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

36 篇文章 0 订阅

场景:我们在写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文件(*^▽^*)

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值