uniapp用什么校验
uniapp 常用校验方法
在 uniapp 中，数据校验可以通过多种方式实现，以下是常见的校验方法：
表单校验
使用 uni-forms 组件内置的校验规则，支持必填、长度、正则等验证：
<uni-forms :rules="rules">
<uni-forms-item name="username" label="用户名">
<input v-model="formData.username" />
</uni-forms-item>
</uni-forms>
rules: {
username: {
rules: [
{ required: true, errorMessage: '用户名必填' },
{ pattern: /^[a-zA-Z0-9]{3,10}$/, errorMessage: '3-10位字母或数字' }
]
}
}手动校验
通过自定义函数进行校验，适用于复杂逻辑：
validateForm() {
if (!this.formData.email) {
uni.showToast({ title: '邮箱不能为空', icon: 'none' });
return false;
}
if (!/^\w+@\w+\.\w+$/.test(this.formData.email)) {
uni.showToast({ title: '邮箱格式错误', icon: 'none' });
return false;
}
return true;
}第三方校验库
集成 vee-validate 或 async-validator 等库实现高级校验：
// 使用 async-validator
import Schema from 'async-validator';
const descriptor = {
phone: { type: 'string', pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
};
const validator = new Schema(descriptor);
validator.validate({ phone: '13800138000' }, (errors) => {
if (errors) console.error(errors);
});服务端校验
提交数据到服务器后通过接口返回错误信息：
uni.request({
url: '/api/submit',
method: 'POST',
data: this.formData,
success: (res) => {
if (res.data.code === 400) {
uni.showToast({ title: res.data.message, icon: 'none' });
}
}
});校验场景建议
- 简单表单：优先使用
uni-forms内置校验 - 复杂逻辑：结合手动校验或第三方库
- 安全性要求高的数据（如密码）：必须增加服务端二次校验
注意事项
- 前端校验不可替代服务端校验，需两者结合
- 移动端校验失败时应通过
uni.showToast等轻量提示 - 正则表达式需根据实际业务调整，如身份证、银行卡号等专用规则
