uniapp表单必填校验案例

好的，以下是一个简单的uniapp表单必填校验案例：

<template>
  <form>
    <div>
      <label for="username">用户名：</label>
      <input type="text" name="username" v-model="form.username" />
      <span v-if="errors.username" class="error">{{ errors.username }}</span>
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" name="password" v-model="form.password" />
      <span v-if="errors.password" class="error">{{ errors.password }}</span>
    </div>
    <button type="submit" @click.prevent="submitForm">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      errors: {}
    }
  },
  methods: {
    validateForm() {
      this.errors = {}
      if (!this.form.username) {
        this.errors.username = '请填写用户名'
      }
      if (!this.form.password) {
        this.errors.password = '请填写密码'
      }
      return Object.keys(this.errors).length === 0
    },
    submitForm() {
      if (this.validateForm()) {
        console.log('表单验证通过，提交数据：', this.form)
      }
    }
  }
}
</script>

<style>
.error {
  color: red;
}
</style>

在上面的代码中，我们首先定义了一个包含用户名和密码的表单，以及一个错误对象 `errors`。在 `validateForm` 方法中，我们通过判断表单中的用户名和密码是否为空来设置对应的错误信息，并返回一个布尔值来表示表单是否通过验证。在点击提交按钮时，我们调用 `validateForm` 方法进行表单验证，如果验证通过，则打印表单数据，否则不做任何操作。同时，我们使用 `v-if` 指令根据 `errors` 对象中的错误信息来渲染错误提示。