如何在uniapp中使用表单验证技术实现输入校验

<template>
  <form>
    <div>
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="username">
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" id="password" v-model="password">
    </div>
    <div>
      <label for="confirmPassword">确认密码：</label>
      <input type="password" id="confirmPassword" v-model="confirmPassword">
    </div>
    <button @click="submitForm">注册</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    submitForm() {
      // 表单提交逻辑
    }
  }
}
</script>

<input type="text" id="username" v-model="username" v-validate:username="{
  required: true,
  min: 6,
  max: 12
}">

methods: {
  submitForm() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        // 表单验证通过，进行提交逻辑
      } else {
        // 表单验证失败，进行相应的处理
      }
    })
  }
}

<div>
  <label for="username">用户名：</label>
  <input type="text" id="username" v-model="username" v-validate:username="{
    required: true,
    min: 6,
    max: 12
  }">
  <span v-show="!$v.username.required">用户名不能为空</span>
  <span v-show="!$v.username.min">用户名长度至少为6个字符</span>
  <span v-show="!$v.username.max">用户名长度最多为12个字符</span>
</div>