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

<template>
  <div class="form-container">
    <h2>提交表单</h2>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="avatar">头像</label>
        <input type="file" id="avatar" ref="avatar" accept="image/*" @change="handleAvatarChange">
      </div>
      <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" id="name" v-model.trim="form.name" placeholder="请输入姓名">
        <span class="error-message" v-if="form.name === ''">姓名不能为空</span>
      </div>
      <div class="form-group">
        <label for="age">年龄</label>
        <input type="number" id="age" v-model.number="form.age" placeholder="请输入年龄">
        <span class="error-message" v-if="!form.age">年龄不能为空</span>
      </div>
      <div class="form-group">
        <label for="gender">性别</label>
        <select id="gender" v-model="form.gender">
          <option value="">请选择</option>
          <option value="male">男</option>
          <option value="female">女</option>
        </select>
        <span class="error-message" v-if="form.gender === ''">性别不能为空</span>
      </div>
      <div class="form-group">
        <label for="hobbies">兴趣爱好</label>
        <select id="hobbies" v-model="form.hobbies" multiple>
          <option value="reading">阅读</option>
          <option value="music">音乐</option>
          <option value="sports">运动</option>
          <option value="travel">旅游</option>
        </select>
        <span class="error-message" v-if="form.hobbies.length === 0">兴趣爱好不能为空</span>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        avatar: null,
        name: '',
        age: null,
        gender: '',
        hobbies: []
      }
    };
  },
  methods: {
    handleAvatarChange(event) {
      this.form.avatar = event.target.files[0];
    },
    submitForm() {
      if (!this.validateForm()) {
        return;
      }
      // TODO: 提交表单
    },
    validateForm() {
      let isValid = true;
      if (this.form.name === '') {
        isValid = false;
        this.$refs.name.focus();
      } else if (!this.form.age) {
        isValid = false;
        this.$refs.age.focus();
      } else if (this.form.gender === '') {
        isValid = false;
        this.$refs.gender.focus();
      } else if (this.form.hobbies.length === 0) {
        isValid = false;
        this.$refs.hobbies.focus();
      }
      return isValid;
    }
  }
};
</script>
<style>
.form-container {
  width: 400px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input[type="file"] {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

select[multiple] {
  height: 6rem;
}

.error-message {
  color: red;
  font-size: 0.8rem;
}
</style>