uni app 表单验证

在uni-app中进行表单验证可以采用以下步骤：

1. 在data中定义表单字段及其对应的验证规则，例如：

data() {
  return {
    form: {
      username: '',
      password: '',
      confirmPassword: ''
    },
    rules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 6, max: 12, message: '用户名长度在6到12个字符之间', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度至少6个字符', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { validator: this.validateConfirmPassword, trigger: 'blur' }
      ]
    }
  }
},

2. 在模板中使用uni-form组件包裹表单，并使用uni-field组件定义表单字段，例如：

<uni-form :model="form" :rules="rules" ref="form">
  <uni-field v-model="form.username" label="用户名" prop="username"></uni-field>
  <uni-field v-model="form.password" label="密码" type="password" prop="password"></uni-field>
  <uni-field v-model="form.confirmPassword" label="确认密码" type="password" prop="confirmPassword"></uni-field>
  <uni-button type="primary" @click="submitForm">提交</uni-button>
</uni-form>

3. 在methods中定义表单提交方法，并调用this.$refs.form.validate()进行表单验证，例如：

methods: {
  submitForm() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        // 表单验证通过，进行提交操作
        // ...
      } else {
        // 表单验证未通过
        return false;
      }
    });
  },
  validateConfirmPassword(rule, value, callback) {
    if (value !== this.form.password) {
      callback(new Error('两次输入的密码不一致'));
    } else {
      callback();
    }
  }
}

通过以上步骤，就可以在uni-app中实现表单验证的功能。可以根据实际需求，自定义验证规则和错误提示信息。