面试题：Vue表单自定义验证规则及绑定复杂数据结构

Question

假设有一个Vue表单用于收集用户的个人信息，其中包括一个多选框组，用户可以选择多个兴趣爱好。请阐述如何实现这个多选框组的双向绑定，并且为兴趣爱好选择添加自定义验证规则，比如至少选择两项。另外，如果个人信息中还包含一个嵌套的地址对象，地址对象有省、市、区等字段，如何实现地址对象在表单中的双向绑定及验证？

Answer 1

多选框组双向绑定及验证

1. 模板部分：

   <template>
     <div>
       <form>
         <div v-for="(hobby, index) in hobbies" :key="index">
           <input type="checkbox" v-model="selectedHobbies" :value="hobby"> {{ hobby }}
         </div>
         <button type="submit" @click.prevent="submitForm">提交</button>
       </form>
     </div>
   </template>
   

2. 数据及方法部分：

   <script>
   export default {
     data() {
       return {
         hobbies: ['阅读', '运动', '音乐', '绘画'],
         selectedHobbies: []
       };
     },
     methods: {
       submitForm() {
         if (this.selectedHobbies.length < 2) {
           alert('至少选择两项兴趣爱好');
           return;
         }
         // 提交表单逻辑
       }
     }
   };
   </script>
   

   在上述代码中，使用v - model指令实现了多选框组的双向绑定。在提交表单时，通过判断selectedHobbies数组的长度来进行至少选择两项的验证。

嵌套地址对象双向绑定及验证

1. 模板部分：

   <template>
     <div>
       <form>
         <label>省：</label>
         <input type="text" v-model="address.province">
         <label>市：</label>
         <input type="text" v-model="address.city">
         <label>区：</label>
         <input type="text" v-model="address.district">
         <button type="submit" @click.prevent="submitAddressForm">提交</button>
       </form>
     </div>
   </template>
   

2. 数据及方法部分：

   <script>
   export default {
     data() {
       return {
         address: {
           province: '',
           city: '',
           district: ''
         }
       };
     },
     methods: {
       submitAddressForm() {
         let hasError = false;
         if (!this.address.province) {
           alert('省不能为空');
           hasError = true;
         }
         if (!this.address.city) {
           alert('市不能为空');
           hasError = true;
         }
         if (!this.address.district) {
           alert('区不能为空');
           hasError = true;
         }
         if (!hasError) {
           // 提交地址表单逻辑
         }
       }
     }
   };
   </script>
   

   这里通过v - model指令实现了地址对象中各个字段的双向绑定。在提交表单时，对省、市、区字段进行非空验证。