UniApp 表单校验两种方式对比：下令式与声明式

前言

   🤟 找工作，来万码优才：👉 #小步伐://万码优才/r6rqmzDaXpYkJZF
  以下重要针对Demo教学，从实战中的领会
作甚下令式 作甚声明式

• 下令式的体验，随时都会有提交的按钮，但是点击提交才会表现不满意的条件！
  
  
  
  
• 声明式的体验，不满意条件时，按钮框是灰色的！
  
  
  
  

• 下令式：
  提交逻辑复杂，须要异步校验（如服务端唯一性查抄）
  表单字段多，依赖用户活动触发验证
  须要复用校验函数，或表单逻辑分散多处
  
• 声明式：
  表单简朴明白
  用户体验优先，提前告知无法提交的情况
  状态可视化，一清二楚
  

对比项下令式校验（方法中校验）声明式校验（computed + disabled 控制）📋 方式在 submit() 方法内通过 validateForm() 显式校验通过 computed 盘算属性及时判断是否可提交🧠 编程范式下令式（Imperative）声明式（Declarative）💡 表达方式手动控制流程：如果失败就 return false自动盘算状态：按钮根据是否满意条件自动禁用🔁 可复用性校验逻辑聚焦在 validateForm()，但要手动调用校验逻辑绑定在状态中，按钮等 UI 自动相应🧪 用户体验用户点击“提交”后才提示不通过一清二楚，提交按钮禁用，无法误触提交⚙️ 机动性可以机动插入额外逻辑，如提交前弹窗确认逻辑得当纯状态驱动，复杂流程需别的处理惩罚🪛 实用场景须要流程控制、嵌套逻辑、异步校验时更得当表单项简朴明白、状态驱动时更得当1. 实战

实战中抽取的Demo比力浅近：
下令式 submit 校验方式（validateForm）

1. <template>
2.   <button type="primary" @click="submit">提交</button>
3. </template>
5. <script>
6. export default {
7.   data() {
8.     return {
9.       imgCntrF: [],
10.       damPhotoList: []
11.     };
12.   },
13.   methods: {
14.     validateForm() {
15.       if (!this.imgCntrF.length) {
16.         uni.showToast({ title: '请拍摄箱门照片', icon: 'none' });
17.         return false;
18.       }
19.       if (this.damPhotoList.length < 2) {
20.         uni.showToast({ title: '请至少拍摄 2 张照片', icon: 'none' });
21.         return false;
22.       }
23.       return true;
24.     },
25.     async submit() {
26.       if (!this.validateForm()) return;
27.       // 执行提交逻辑
28.       console.log("提交成功");
29.     }
30.   }
31. }
32. </script>

复制代码

声明式 computed 控制按钮状态

1. <template>
2.   <button type="primary" :disabled="!canSubmit" @click="submit">提交</button>
3. </template>
5. <script>
6. export default {
7.   data() {
8.     return {
9.       photoList: {
10.         door: '',  // 对应 imgCntrF
11.         side: ''
12.       },
13.       damPhotoList: [],
14.       photoField: [
15.         { key: 'door', label: '箱门照片' },
16.         { key: 'side', label: '侧面照片' }
17.       ]
18.     };
19.   },
20.   computed: {
21.     canSubmit() {
22.       return this.photoField.every(field => this.photoList[field.key]) &&
23.              this.damPhotoList.length >= 2;
24.     }
25.   },
26.   methods: {
27.     submit() {
28.       console.log("提交成功");
29.     }
30.   }
31. }
32. </script>

复制代码

2. Demo

以UniApp（ Vue2 语法 + script 写法）
下令式校验提交（Imperative）

1. <template>
2.   <view class="container">
3.     <view class="section">
4.       <text>箱门照片：</text>
5.       <button @click="selectBoxDoorPhoto">选择照片</button>
6.       <image v-if="imgCntrF" :src="imgCntrF" class="img-preview" />
7.     </view>
9.     <view class="section">
10.       <text>破损照片：</text>
11.       <button @click="addDamPhoto">添加照片</button>
12.       <view class="photo-list">
13.         <image v-for="(photo, index) in damPhotoList" :key="index" :src="photo" class="img-preview" />
14.       </view>
15.     </view>
17.     <button type="primary" @click="submit">提交</button>
18.   </view>
19. </template>
21. <script>
22. export default {
23.   data() {
24.     return {
25.       imgCntrF: '', // 箱门照片 URL
26.       damPhotoList: [] // 破损照片 URL 列表
27.     };
28.   },
29.   methods: {
30.     selectBoxDoorPhoto() {
31.       uni.chooseImage({
32.         count: 1,
33.         success: (res) => {
34.           this.imgCntrF = res.tempFilePaths[0];
35.         }
36.       });
37.     },
38.     addDamPhoto() {
39.       uni.chooseImage({
40.         count: 1,
41.         success: (res) => {
42.           this.damPhotoList.push(res.tempFilePaths[0]);
43.         }
44.       });
45.     },
46.     validateForm() {
47.       if (!this.imgCntrF) {
48.         uni.showToast({ title: '请拍摄箱门照片', icon: 'none' });
49.         return false;
50.       }
51.       if (this.damPhotoList.length < 2) {
52.         uni.showToast({ title: '请至少拍摄 2 张破损照片', icon: 'none' });
53.         return false;
54.       }
55.       return true;
56.     },
57.     submit() {
58.       if (!this.validateForm()) return;
60.       // 模拟提交成功
61.       uni.showToast({ title: '提交成功', icon: 'success' });
62.     }
63.   }
64. };
65. </script>
67. <style>
68. .container {
69.   padding: 20rpx;
70. }
71. .section {
72.   margin-bottom: 30rpx;
73. }
74. .img-preview {
75.   width: 200rpx;
76.   height: 200rpx;
77.   margin-top: 10rpx;
78. }
79. .photo-list {
80.   display: flex;
81.   flex-wrap: wrap;
82.   gap: 10rpx;
83. }
84. </style>

复制代码

声明式按钮控制提交（Declarative）

1. <template>
2.   <view class="container">
3.     <view class="section">
4.       <text>箱门照片：</text>
5.       <button @click="selectBoxDoorPhoto">选择照片</button>
6.       <image v-if="photoList.door" :src="photoList.door" class="img-preview" />
7.     </view>
9.     <view class="section">
10.       <text>破损照片：</text>
11.       <button @click="addDamPhoto">添加照片</button>
12.       <view class="photo-list">
13.         <image v-for="(photo, index) in damPhotoList" :key="index" :src="photo" class="img-preview" />
14.       </view>
15.     </view>
17.     <button type="primary" :disabled="!canSubmit" @click="submit">提交</button>
18.   </view>
19. </template>
21. <script>
22. export default {
23.   data() {
24.     return {
25.       photoList: {
26.         door: '' // 箱门照片
27.       },
28.       damPhotoList: []
29.     };
30.   },
31.   computed: {
32.     canSubmit() {
33.       return !!this.photoList.door && this.damPhotoList.length >= 2;
34.     }
35.   },
36.   methods: {
37.     selectBoxDoorPhoto() {
38.       uni.chooseImage({
39.         count: 1,
40.         success: (res) => {
41.           this.photoList.door = res.tempFilePaths[0];
42.         }
43.       });
44.     },
45.     addDamPhoto() {
46.       uni.chooseImage({
47.         count: 1,
48.         success: (res) => {
49.           this.damPhotoList.push(res.tempFilePaths[0]);
50.         }
51.       });
52.     },
53.     submit() {
54.       uni.showToast({ title: '提交成功', icon: 'success' });
55.     }
56.   }
57. };
58. </script>
60. <style>
61. .container {
62.   padding: 20rpx;
63. }
64. .section {
65.   margin-bottom: 30rpx;
66. }
67. .img-preview {
68.   width: 200rpx;
69.   height: 200rpx;
70.   margin-top: 10rpx;
71. }
72. .photo-list {
73.   display: flex;
74.   flex-wrap: wrap;
75.   gap: 10rpx;
76. }
77. </style>

复制代码