如何在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>注册</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>