vue项目引入外部js校验规则 | 您所在的位置:网站首页 › 怎么引入jqueryjs › 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:'[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文件(*^▽^*)
|
CopyRight 2018-2019 实验室设备网 版权所有 |