在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>