当前位置：首页 > uni-app

uniapp用什么校验

2026-02-06 08:01:54uni-app

uniapp 常用校验方法

在 uniapp 中，数据校验可以通过多种方式实现，以下是常见的校验方法：

表单校验
使用 uni-forms 组件内置的校验规则，支持必填、长度、正则等验证：

uniapp用什么校验

<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位字母或数字' }
    ]
  }
}

手动校验
通过自定义函数进行校验，适用于复杂逻辑：

uniapp用什么校验

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' });
    }
  }
});