### 在 UniApp 中实现动态表单字段 `chicken_houses` 的校验方法 #### 1. **初始化动态数组** 在 Vue 数据模型中定义初始状态的 `chicken_houses` 数组，并提供一个方法用于动态添加新条目。 ```javascript data() { return { form: { chicken_houses: [] // 初始化为空数组 } }; }, methods: { addChickens() { this.form.chicken_houses.push({ breed: '', // 品种 base_age: null, // 基础日龄 amount: null, // 数量 size: '', // 码数 egg_number: null,// 产蛋件数 score: null // 质量分 }); }, removeChickens(index) { this.form.chicken_houses.splice(index, 1); } } ``` --- #### 2. **创建校验逻辑** 针对 `chicken_houses` 数组中的每一条记录，逐一检查各个字段是否符合预期规则。如果发现任何不符合条件的情况，则返回具体的错误提示信息。 ```javascript validateChickenHouses() { const errors = []; // 存储所有的错误消息 this.form.chicken_houses.forEach((item, index) => { if (!item.breed || item.breed.trim().length === 0) { errors.push(`第${index + 1}项：品种不能为空`); } if (isNaN(item.base_age) || item.base_age < 0 ) { errors.push(`第${index + 1}项：基础日龄必须是非负整数`); } if (isNaN(item.amount) || item.amount <= 0) { errors.push(`第${index + 1}项：数量必须是大于零的数字`); } if (!item.size || item.size.trim().length === 0){ errors.push(`第${index + 1}项：码数不能为空`); } if (isNaN(item.egg_number) || item.egg_number < 0){ errors.push(`第${index + 1}项：产蛋件数必须是非负整数`); } if (isNaN(item.score) || item.score < 0 ){ errors.push(`第${index + 1}项：质量分必须是非负数`); } }); if(errors.length > 0){ uni.showToast({title:errors.join("\n"),icon:"none",duration:8000}); return false; }else{ return true; } } ``` --- #### 3. **绑定事件与触发校验** 将上述校验逻辑集成到提交按钮点击事件或其他适当位置，确保每次操作前都能完成必要的数据有效性检测。 ```javascript submitForm(){ if(!this.validateChickenHouses()){ return ; } console.log("提交的数据:",JSON.stringify(this.form)); // 进一步处理表单提交逻辑... } ``` --- #### 4. **前端界面展示** 利用 `v-for` 指令循环渲染每一个鸡舍的信息录入框，并通过双向绑定技术实时更新对应的 model 属性值。 ```html <view> <!-- 遍历显示已有鸡舍 --> <block v-for="(house,index) in form.chicken_houses" :key="index"> <view class="form-item"> <label>品种：</label><input type="text" v-model="house.breed"/> <label>基础日龄：</label><input type="number" v-model.number="house.base_age"/> <label>数量：</label><input type="number" v-model.number="house.amount"/> <label>码数：</label><input type="text" v-model="house.size"/> <label>产蛋件数：</label><input type="number" v-model.number="house.egg_number"/> <label>质量分：</label><input type="number" step="any" v-model.number="house.score"/> <button @click="removeChickens(index)">移除此项</button> </view> </block> <!-- 添加新的鸡舍选项 --> <button @click="addChickens">增加一项鸡舍信息</button> <!-- 提交整个表单 --> <button @click="submitForm">保存并提交</button> </view> ``` ---