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

#vue项目引入外部js校验规则| 来源: 网络整理| 查看: 265

场景：我们在写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:'[email protected]', idCard:'' } } mounted(){ console.log('手机号验证',validatePhoneNumber(this.phone)) console.log('邮箱验证：',validateEmail(this.email)) console.log('验证身份证号：',validateIDCard(this.idCard)) }

结果如下：

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

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:'[email protected]', 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:{ } }

效果如下：

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

【本文地址】

公司简介

联系我们