如何在VUE引入工具类JS

最新推荐文章于 2025-05-25 12:49:52 发布

Adonis_D_Gogh

最新推荐文章于 2025-05-25 12:49:52 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Adonis_D_Gogh/article/details/80049907

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了两种在VUE项目中实现手机号验证的方法。一种是通过直接挂载验证方法到Vue原型上，另一种则是利用export default导出验证方法并在需要的地方导入使用。这两种方式都能有效地完成手机号格式的校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在VUE引入工具类JS

用引入手机号验证为例：

方法一：

【utils.js文件】

import Vue from 'vue'
Vue.prototype.validatePhone = validatePhone;
function validatePhone(rule, value, callback){
	let mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(199[0-9]{8})|(15[0-9]{9})$/;
	if(!mobile.test(value)) {
		return callback(new Error('请填写正确的手机号'));
	} else {
		callback();
	}
};

【需要引用的vue文件中】：使用this.validatePhone

rules: {
					phone: [
						{ required: true,validator:this.validatePhone, trigger: 'blur' }
					]
},

方法二：

【utils.js文件】（利用export default将validatePhone暴露出来，这里我用的时候如果把export default放在定义validatePhone之前会出问题）

var validatePhone = (rule, value, callback) => {
				let mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(199[0-9]{8})|(15[0-9]{9})$/;
				if(!mobile.test(value)) {
					return callback(new Error('请填写正确的手机号'));
				} else {
					callback();
				}

			};
export default{
	validatePhone
}

【需要引用的vue文件中】：（需要import，注意路径；util为自己命名，使用util.validatePhone）

<script>
	import  util from '../../utils/utils.js';
	...
	...
	rules: {
			phone: [
					{ required: true, validator:util.validatePhone, trigger: 'blur' }
			],
	},
	...
	...
</script>