用uView框架 插入一个提交表单需要头像上传姓名年龄性别兴趣爱好用下拉框组件需要不为空等校验 求vue源代码

<template>
  <form>
    <div class="form-group">
      <label for="avatar">头像</label>
      <input type="file" id="avatar" @change="handleAvatarChange" required>
    </div>
    <div class="form-group">
      <label for="name">姓名</label>
      <input type="text" id="name" v-model="name" required>
    </div>
    <div class="form-group">
      <label for="age">年龄</label>
      <input type="number" id="age" v-model="age" required>
    </div>
    <div class="form-group">
      <label for="gender">性别</label>
      <select id="gender" v-model="gender" required>
        <option value="">请选择</option>
        <option value="male">男</option>
        <option value="female">女</option>
      </select>
    </div>
    <div class="form-group">
      <label for="interests">兴趣爱好</label>
      <select id="interests" v-model="interests" multiple required>
        <option value="">请选择</option>
        <option value="reading">阅读</option>
        <option value="traveling">旅游</option>
        <option value="sports">运动</option>
      </select>
    </div>
    <button type="submit" @click.prevent="submitForm">提交</button>
  </form>
</template>
<script>
export default {
  data() {
    return {
      name: '',
      age: null,
      gender: '',
      interests: []
    }
  },
  methods: {
    handleAvatarChange(event) {
      // 处理头像上传
    },
    submitForm() {
      // 校验表单
      if (!this.name || !this.age || !this.gender || !this.interests.length) {
        alert('请填写完整信息')
        return
      }
      // 提交表单
    }
  }
}
</script>