快捷導(dǎo)航

UniApp表單校驗(yàn)兩種方式對(duì)比詳解

更新時(shí)間：2025年03月24日 11:30:39 作者：碼農(nóng)研究僧

本文對(duì)比了UniApp中表單校驗(yàn)的命令式和聲明式兩種方式,通過(guò)實(shí)戰(zhàn)示例展示了它們的優(yōu)缺點(diǎn),并有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下

命令式：
提交邏輯復(fù)雜，需要異步校驗(yàn)（如服務(wù)端唯一性檢查）
表單字段多，依賴用戶行為觸發(fā)驗(yàn)證
需要復(fù)用校驗(yàn)函數(shù)，或表單邏輯分散多處
聲明式：
表單簡(jiǎn)單明了
用戶體驗(yàn)優(yōu)先，提前告知無(wú)法提交的情況
狀態(tài)可視化，一目了然

對(duì)比項(xiàng)	命令式校驗(yàn)（方法中校驗(yàn)）	聲明式校驗(yàn)（computed + disabled 控制）
方式	在 submit() 方法內(nèi)通過(guò) validateForm() 顯式校驗(yàn)	通過(guò) computed 計(jì)算屬性實(shí)時(shí)判斷是否可提交
編程范式	命令式（Imperative）	聲明式（Declarative）
表達(dá)方式	手動(dòng)控制流程：如果失敗就 return false	自動(dòng)計(jì)算狀態(tài)：按鈕根據(jù)是否滿足條件自動(dòng)禁用
可復(fù)用性	校驗(yàn)邏輯聚焦在 validateForm()，但要手動(dòng)調(diào)用	校驗(yàn)邏輯綁定在狀態(tài)中，按鈕等 UI 自動(dòng)響應(yīng)
用戶體驗(yàn)	用戶點(diǎn)擊“提交”后才提示不通過(guò)	一目了然，提交按鈕禁用，無(wú)法誤觸提交
靈活性	可以靈活插入額外邏輯，如提交前彈窗確認(rèn)	邏輯適合純狀態(tài)驅(qū)動(dòng)，復(fù)雜流程需另外處理
適用場(chǎng)景	需要流程控制、嵌套邏輯、異步校驗(yàn)時(shí)更適合	表單項(xiàng)簡(jiǎn)單明確、狀態(tài)驅(qū)動(dòng)時(shí)更適合

1. 實(shí)戰(zhàn)

實(shí)戰(zhàn)中抽取的Demo比較簡(jiǎn)易：

命令式 submit 校驗(yàn)方式（validateForm）

<template>
  <button type="primary" @click="submit">提交</button>
</template>

<script>
export default {
  data() {
    return {
      imgCntrF: [],
      damPhotoList: []
    };
  },
  methods: {
    validateForm() {
      if (!this.imgCntrF.length) {
        uni.showToast({ title: '請(qǐng)拍攝箱門(mén)照片', icon: 'none' });
        return false;
      }
      if (this.damPhotoList.length < 2) {
        uni.showToast({ title: '請(qǐng)至少拍攝 2 張照片', icon: 'none' });
        return false;
      }
      return true;
    },
    async submit() {
      if (!this.validateForm()) return;
      // 執(zhí)行提交邏輯
      console.log("提交成功");
    }
  }
}
</script>

聲明式 computed 控制按鈕狀態(tài)

<template>
  <button type="primary" :disabled="!canSubmit" @click="submit">提交</button>
</template>

<script>
export default {
  data() {
    return {
      photoList: {
        door: '',  // 對(duì)應(yīng) imgCntrF
        side: ''
      },
      damPhotoList: [],
      photoField: [
        { key: 'door', label: '箱門(mén)照片' },
        { key: 'side', label: '側(cè)面照片' }
      ]
    };
  },
  computed: {
    canSubmit() {
      return this.photoField.every(field => this.photoList[field.key]) &&
             this.damPhotoList.length >= 2;
    }
  },
  methods: {
    submit() {
      console.log("提交成功");
    }
  }
}
</script>

2. Demo

以UniApp（ Vue2 語(yǔ)法 + script 寫(xiě)法）

命令式校驗(yàn)提交（Imperative）

<template>
  <view class="container">
    <view class="section">
      <text>箱門(mén)照片：</text>
      <button @click="selectBoxDoorPhoto">選擇照片</button>
      <image v-if="imgCntrF" :src="imgCntrF" class="img-preview" />
    </view>

    <view class="section">
      <text>破損照片：</text>
      <button @click="addDamPhoto">添加照片</button>
      <view class="photo-list">
        <image v-for="(photo, index) in damPhotoList" :key="index" :src="photo" class="img-preview" />
      </view>
    </view>

    <button type="primary" @click="submit">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgCntrF: '', // 箱門(mén)照片 URL
      damPhotoList: [] // 破損照片 URL 列表
    };
  },
  methods: {
    selectBoxDoorPhoto() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.imgCntrF = res.tempFilePaths[0];
        }
      });
    },
    addDamPhoto() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.damPhotoList.push(res.tempFilePaths[0]);
        }
      });
    },
    validateForm() {
      if (!this.imgCntrF) {
        uni.showToast({ title: '請(qǐng)拍攝箱門(mén)照片', icon: 'none' });
        return false;
      }
      if (this.damPhotoList.length < 2) {
        uni.showToast({ title: '請(qǐng)至少拍攝 2 張破損照片', icon: 'none' });
        return false;
      }
      return true;
    },
    submit() {
      if (!this.validateForm()) return;

      // 模擬提交成功
      uni.showToast({ title: '提交成功', icon: 'success' });
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
}
.section {
  margin-bottom: 30rpx;
}
.img-preview {
  width: 200rpx;
  height: 200rpx;
  margin-top: 10rpx;
}
.photo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}
</style>

聲明式按鈕控制提交（Declarative）

<template>
  <view class="container">
    <view class="section">
      <text>箱門(mén)照片：</text>
      <button @click="selectBoxDoorPhoto">選擇照片</button>
      <image v-if="photoList.door" :src="photoList.door" class="img-preview" />
    </view>

    <view class="section">
      <text>破損照片：</text>
      <button @click="addDamPhoto">添加照片</button>
      <view class="photo-list">
        <image v-for="(photo, index) in damPhotoList" :key="index" :src="photo" class="img-preview" />
      </view>
    </view>

    <button type="primary" :disabled="!canSubmit" @click="submit">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      photoList: {
        door: '' // 箱門(mén)照片
      },
      damPhotoList: []
    };
  },
  computed: {
    canSubmit() {
      return !!this.photoList.door && this.damPhotoList.length >= 2;
    }
  },
  methods: {
    selectBoxDoorPhoto() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.photoList.door = res.tempFilePaths[0];
        }
      });
    },
    addDamPhoto() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.damPhotoList.push(res.tempFilePaths[0]);
        }
      });
    },
    submit() {
      uni.showToast({ title: '提交成功', icon: 'success' });
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
}
.section {
  margin-bottom: 30rpx;
}
.img-preview {
  width: 200rpx;
  height: 200rpx;
  margin-top: 10rpx;
}
.photo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}
</style>

到此這篇關(guān)于UniApp表單校驗(yàn)兩種方式對(duì)比詳解的文章就介紹到這了,更多相關(guān)UniApp表單校驗(yàn)方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: