uniapp全局校验
全局校验的实现方式
在UniApp中实现全局校验通常涉及表单验证、请求拦截或路由守卫等场景。以下是几种常见的全局校验方法：
表单全局验证
使用uni-forms组件结合自定义校验规则实现表单全局验证：
// main.js 中注册全局校验规则
import Vue from 'vue'
Vue.prototype.$rules = {
required: (value, callback) => {
if (!value) {
callback(new Error('必填项'))
} else {
callback()
}
},
mobile: (value, callback) => {
if (!/^1[3-9]\d{9}$/.test(value)) {
callback(new Error('手机号格式错误'))
} else {
callback()
}
}
}页面中使用：
<uni-forms :rules="rules" ref="form">
<uni-forms-item name="username" label="用户名">
<input v-model="formData.username"/>
</uni-forms-item>
</uni-forms>export default {
data() {
return {
rules: {
username: {
rules: [{
required: true,
errorMessage: '请输入用户名'
}]
}
}
}
}
}请求拦截校验
通过修改uni.request实现请求前的全局校验：
const originalRequest = uni.request
uni.request = function(options) {
// 添加token校验
if (!getToken() && !options.noAuth) {
uni.showToast({ title: '请先登录', icon: 'none' })
return Promise.reject('未授权')
}
// 添加公共参数
options.header = options.header || {}
options.header['X-Token'] = getToken()
return originalRequest(options)
}路由拦截校验
使用uni.addInterceptor实现页面跳转前的全局校验：
// 在App.vue的onLaunch中添加
uni.addInterceptor('navigateTo', {
invoke(args) {
if (args.url.includes('/member/') && !isLogin()) {
uni.showModal({
title: '提示',
content: '请先登录',
success(res) {
if (res.confirm) {
uni.navigateTo({ url: '/pages/login/login' })
}
}
})
return false
}
return true
}
})全局混入校验方法
通过Vue.mixin添加全局校验方法：
Vue.mixin({
methods: {
$validateForm(refName) {
return new Promise((resolve, reject) => {
this.$refs[refName].validate().then(res => {
resolve(res)
}).catch(err => {
uni.showToast({
title: err[0].errorMessage,
icon: 'none'
})
reject(err)
})
})
}
}
})页面中使用：
async submit() {
try {
await this.$validateForm('formRef')
// 验证通过后的逻辑
} catch {
// 验证失败
}
}注意事项
- H5端路由拦截可能受限，需配合后端校验
- 小程序端部分API拦截可能无效，需使用官方提供的拦截方式
- 复杂校验建议使用第三方库如
vee-validate或async-validator - 全局混入需注意方法命名冲突问题
根据项目实际需求选择合适的全局校验方案，通常建议组合使用多种方式实现完整的校验体系。
