鴻蒙OSUniApp 實現的表單驗證與提交功能#三方框架 #Uniapp

UniApp 實現的表單驗證與提交功能

前言

在移動端應用開發中，表單是用戶與應用交互的重要媒介。一個好的表單不僅布局合理、使用方便，還應該具備完善的驗證與提交功能，以確保用戶輸入的數據準確無誤。本文將分享如何在 UniApp 中實現表單驗證與提交功能，幫助你構建更加健壯的表單系統。

作為一個經常與表單打交道的開發者，我發現很多初學者往往忽視了表單驗證的重要性，或者實現方式不夠優雅。通過本文，希望能為你提供一些關于 UniApp 表單處理的實用技巧和最佳實踐。

為什么需要表單驗證？

想象一下，如果沒有表單驗證，用戶可能會提交不完整或格式錯誤的數據：

手機號碼少輸一位或輸入了字母
密碼太簡單，不符合安全要求
重要字段被遺漏
日期格式錯誤
上傳的圖片尺寸過大或格式不支持

這些問題不僅會導致后端數據處理錯誤，還會影響用戶體驗。因此，前端表單驗證顯得尤為重要。

UniApp 表單驗證的實現方式

在 UniApp 中，有多種方式可以實現表單驗證：

使用原生方法自行實現
使用第三方驗證庫（如 async-validator）
結合 uView 等 UI 框架使用內置驗證功能

下面我們主要討論前兩種方式的實現。

方式一：自行實現表單驗證

自行實現的優點是靈活、無需引入額外依賴，但需要自己編寫各種驗證規則和處理邏輯。

基本思路：

定義表單數據模型
編寫驗證規則函數
在提交前調用驗證函數
根據驗證結果決定是否提交

讓我們看一個簡單的注冊表單驗證示例：

export default {data() {return {// 表單數據form: {username: '',password: '',confirmPassword: '',mobile: '',email: '',agree: false},// 錯誤信息errors: {username: '',password: '',confirmPassword: '',mobile: '',email: '',agree: ''}}},methods: {// 驗證用戶名validateUsername() {if (!this.form.username) {this.errors.username = '用戶名不能為空';return false;}if (this.form.username.length < 3 || this.form.username.length > 20) {this.errors.username = '用戶名長度應為3-20個字符';return false;}this.errors.username = '';return true;},// 驗證密碼validatePassword() {if (!this.form.password) {this.errors.password = '密碼不能為空';return false;}if (this.form.password.length < 6) {this.errors.password = '密碼長度不能少于6個字符';return false;}// 包含數字和字母的正則表達式const passwordPattern = /^(?=.*[0-9])(?=.*[a-zA-Z]).{6,}$/;if (!passwordPattern.test(this.form.password)) {this.errors.password = '密碼必須包含數字和字母';return false;}this.errors.password = '';return true;},// 驗證確認密碼validateConfirmPassword() {if (!this.form.confirmPassword) {this.errors.confirmPassword = '請確認密碼';return false;}if (this.form.confirmPassword !== this.form.password) {this.errors.confirmPassword = '兩次輸入的密碼不一致';return false;}this.errors.confirmPassword = '';return true;},// 驗證手機號validateMobile() {if (!this.form.mobile) {this.errors.mobile = '手機號不能為空';return false;}// 中國大陸手機號正則表達式const mobilePattern = /^1[3-9]\d{9}$/;if (!mobilePattern.test(this.form.mobile)) {this.errors.mobile = '請輸入有效的手機號碼';return false;}this.errors.mobile = '';return true;},// 驗證郵箱validateEmail() {if (!this.form.email) {this.errors.email = '郵箱不能為空';return false;}// 郵箱正則表達式const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;if (!emailPattern.test(this.form.email)) {this.errors.email = '請輸入有效的郵箱地址';return false;}this.errors.email = '';return true;},// 驗證用戶協議validateAgree() {if (!this.form.agree) {this.errors.agree = '請同意用戶協議';return false;}this.errors.agree = '';return true;},// 驗證所有字段validateForm() {const usernameValid = this.validateUsername();const passwordValid = this.validatePassword();const confirmPasswordValid = this.validateConfirmPassword();const mobileValid = this.validateMobile();const emailValid = this.validateEmail();const agreeValid = this.validateAgree();return usernameValid && passwordValid && confirmPasswordValid && mobileValid && emailValid && agreeValid;},// 提交表單submitForm() {// 先清空所有錯誤信息for (let key in this.errors) {this.errors[key] = '';}// 驗證表單if (!this.validateForm()) {uni.showToast({title: '請正確填寫表單信息',icon: 'none'});return;}// 驗證通過，可以進行提交操作uni.showLoading({title: '提交中...'});// 模擬提交請求setTimeout(() => {uni.hideLoading();uni.showToast({title: '注冊成功',icon: 'success'});// 重置表單或跳轉頁面// this.resetForm();// uni.navigateTo({ url: '/pages/login/login' });}, 1500);},// 重置表單resetForm() {this.form = {username: '',password: '',confirmPassword: '',mobile: '',email: '',agree: false};for (let key in this.errors) {this.errors[key] = '';}}}
}

對應的模板部分可以這樣編寫：

<template><view class="register-form"><view class="form-item"><text class="label">用戶名</text><input class="input" v-model="form.username" placeholder="請輸入用戶名" @blur="validateUsername" /><text v-if="errors.username" class="error-tip">{{ errors.username }}</text></view><view class="form-item"><text class="label">密碼</text><input class="input" v-model="form.password" type="password" placeholder="請輸入密碼" @blur="validatePassword" /><text v-if="errors.password" class="error-tip">{{ errors.password }}</text></view><view class="form-item"><text class="label">確認密碼</text><input class="input" v-model="form.confirmPassword" type="password" placeholder="請再次輸入密碼" @blur="validateConfirmPassword" /><text v-if="errors.confirmPassword" class="error-tip">{{ errors.confirmPassword }}</text></view><view class="form-item"><text class="label">手機號</text><input class="input" v-model="form.mobile" type="number" placeholder="請輸入手機號" @blur="validateMobile" /><text v-if="errors.mobile" class="error-tip">{{ errors.mobile }}</text></view><view class="form-item"><text class="label">郵箱</text><input class="input" v-model="form.email" placeholder="請輸入郵箱" @blur="validateEmail" /><text v-if="errors.email" class="error-tip">{{ errors.email }}</text></view><view class="form-item checkbox-item"><checkbox v-model="form.agree" /><text class="agreement-text" @click="form.agree = !form.agree">我已閱讀并同意《用戶協議》</text><text v-if="errors.agree" class="error-tip">{{ errors.agree }}</text></view><button class="submit-btn" type="primary" @click="submitForm">立即注冊</button></view>
</template>

并添加一些基本樣式：

<style scoped>
.register-form {padding: 30rpx;
}.form-item {margin-bottom: 40rpx;position: relative;
}.label {display: block;margin-bottom: 10rpx;font-size: 28rpx;color: #333;
}.input {width: 100%;height: 80rpx;border: 1rpx solid #dcdfe6;border-radius: 8rpx;padding: 0 20rpx;box-sizing: border-box;font-size: 28rpx;
}.error-tip {position: absolute;left: 0;bottom: -36rpx;font-size: 24rpx;color: #f56c6c;
}.checkbox-item {display: flex;align-items: center;
}.agreement-text {font-size: 26rpx;margin-left: 10rpx;
}.submit-btn {margin-top: 60rpx;
}
</style>

方式二：使用 async-validator 庫

對于復雜的驗證需求，使用成熟的驗證庫會更加便捷。async-validator 是一個流行的表單驗證庫，支持豐富的驗證規則和自定義驗證功能。

首先，安裝依賴：

npm install async-validator --save

然后，在組件中使用：

import Schema from 'async-validator';export default {data() {return {// 表單數據form: {username: '',password: '',confirmPassword: '',mobile: '',email: '',agree: false},// 錯誤信息errors: {}}},computed: {// 定義驗證規則rules() {return {username: [{ required: true, message: '用戶名不能為空' },{ min: 3, max: 20, message: '用戶名長度應為3-20個字符' }],password: [{ required: true, message: '密碼不能為空' },{ min: 6, message: '密碼長度不能少于6個字符' },{ pattern: /^(?=.*[0-9])(?=.*[a-zA-Z]).{6,}$/, message: '密碼必須包含數字和字母' }],confirmPassword: [{ required: true, message: '請確認密碼' },{ validator: (rule, value, callback) => {if (value !== this.form.password) {callback(new Error('兩次輸入的密碼不一致'));} else {callback();}} }],mobile: [{ required: true, message: '手機號不能為空' },{ pattern: /^1[3-9]\d{9}$/, message: '請輸入有效的手機號碼' }],email: [{ required: true, message: '郵箱不能為空' },{ type: 'email', message: '請輸入有效的郵箱地址' }],agree: [{ validator: (rule, value, callback) => {if (!value) {callback(new Error('請同意用戶協議'));} else {callback();}} }]};}},methods: {// 驗證單個字段validateField(field) {const descriptor = {};descriptor[field] = this.rules[field];const validator = new Schema(descriptor);const source = {};source[field] = this.form[field];validator.validate(source, (errors) => {if (errors) {// 有錯誤this.$set(this.errors, field, errors[0].message);} else {// 沒有錯誤this.$set(this.errors, field, '');}});},// 驗證所有字段validateForm() {return new Promise((resolve, reject) => {const validator = new Schema(this.rules);validator.validate(this.form, (errors) => {if (errors) {// 有錯誤const errorObj = {};errors.forEach(error => {errorObj[error.field] = error.message;});this.errors = errorObj;resolve(false);} else {// 驗證通過this.errors = {};resolve(true);}});});},// 提交表單async submitForm() {const valid = await this.validateForm();if (!valid) {uni.showToast({title: '請正確填寫表單信息',icon: 'none'});return;}// 驗證通過，可以進行提交操作uni.showLoading({title: '提交中...'});// 模擬提交請求setTimeout(() => {uni.hideLoading();uni.showToast({title: '注冊成功',icon: 'success'});// 重置表單或跳轉頁面// this.resetForm();// uni.navigateTo({ url: '/pages/login/login' });}, 1500);},// 重置表單resetForm() {this.form = {username: '',password: '',confirmPassword: '',mobile: '',email: '',agree: false};this.errors = {};}}
}

模板部分可以與前面的例子類似，只需要修改驗證方法的調用：

<input class="input" v-model="form.username" placeholder="請輸入用戶名" @blur="validateField('username')" />

表單提交功能的實現

表單驗證通過后，我們需要將數據提交到服務器。在 UniApp 中，可以使用 uni.request() 方法發送網絡請求。

下面是一個完整的表單提交示例：

// 提交表單
async submitForm() {const valid = await this.validateForm();if (!valid) {uni.showToast({title: '請正確填寫表單信息',icon: 'none'});return;}// 顯示加載提示uni.showLoading({title: '提交中...'});try {// 發送請求const res = await uni.request({url: 'https://api.example.com/register',method: 'POST',data: this.form,header: {'content-type': 'application/json'}});// 請求成功if (res.statusCode === 200 && res.data.code === 0) {uni.hideLoading();uni.showToast({title: '注冊成功',icon: 'success'});// 存儲登錄信息uni.setStorageSync('token', res.data.data.token);uni.setStorageSync('userInfo', res.data.data.userInfo);// 跳轉到首頁setTimeout(() => {uni.switchTab({url: '/pages/index/index'});}, 1500);} else {throw new Error(res.data.message || '注冊失敗');}} catch (error) {uni.hideLoading();uni.showToast({title: error.message || '網絡錯誤，請稍后重試',icon: 'none'});}
}

實戰案例：會員信息編輯表單

下面是一個完整的會員信息編輯表單案例，綜合了表單驗證和提交功能：

<template><view class="profile-form"><view class="form-header"><view class="avatar-wrapper"><image class="avatar" :src="form.avatar || '/static/default-avatar.png'" @click="chooseAvatar"></image><text class="edit-hint">點擊修改頭像</text></view></view><view class="form-content"><view class="form-item"><text class="label">姓名</text><input class="input" v-model="form.name" placeholder="請輸入您的姓名" @blur="validateField('name')" /><text v-if="errors.name" class="error-tip">{{ errors.name }}</text></view><view class="form-item"><text class="label">性別</text><view class="radio-group"><view class="radio-item" @click="form.gender = 1"><view class="radio-box" :class="{ 'checked': form.gender === 1 }"></view><text class="radio-label">男</text></view><view class="radio-item" @click="form.gender = 2"><view class="radio-box" :class="{ 'checked': form.gender === 2 }"></view><text class="radio-label">女</text></view></view></view><view class="form-item"><text class="label">手機號</text><input class="input" v-model="form.mobile" type="number" placeholder="請輸入手機號" @blur="validateField('mobile')" /><text v-if="errors.mobile" class="error-tip">{{ errors.mobile }}</text></view><view class="form-item"><text class="label">郵箱</text><input class="input" v-model="form.email" placeholder="請輸入郵箱" @blur="validateField('email')" /><text v-if="errors.email" class="error-tip">{{ errors.email }}</text></view><view class="form-item"><text class="label">生日</text><picker mode="date" :value="form.birthday" @change="onBirthdayChange"><view class="picker-box"><text class="picker-text">{{ form.birthday || '請選擇出生日期' }}</text><text class="picker-arrow">></text></view></picker></view><view class="form-item"><text class="label">地址</text><textarea class="textarea" v-model="form.address" placeholder="請輸入您的詳細地址" @blur="validateField('address')" /><text v-if="errors.address" class="error-tip">{{ errors.address }}</text></view><view class="form-item"><text class="label">個人簡介</text><textarea class="textarea" v-model="form.bio" placeholder="介紹一下自己吧（選填）" /></view></view><button class="submit-btn" type="primary" @click="submitForm">保存修改</button></view>
</template><script>
import Schema from 'async-validator';export default {data() {return {// 表單數據form: {avatar: '',name: '',gender: 1, // 1-男，2-女mobile: '',email: '',birthday: '',address: '',bio: ''},// 錯誤信息errors: {}}},computed: {// 定義驗證規則rules() {return {name: [{ required: true, message: '姓名不能為空' },{ max: 20, message: '姓名長度不能超過20個字符' }],mobile: [{ required: true, message: '手機號不能為空' },{ pattern: /^1[3-9]\d{9}$/, message: '請輸入有效的手機號碼' }],email: [{ required: true, message: '郵箱不能為空' },{ type: 'email', message: '請輸入有效的郵箱地址' }],address: [{ required: true, message: '地址不能為空' },{ max: 100, message: '地址長度不能超過100個字符' }]};}},onLoad() {// 獲取用戶信息（示例數據）const userInfo = {avatar: '/static/avatar.png',name: '張三',gender: 1,mobile: '13800138000',email: 'zhangsan@example.com',birthday: '1990-01-01',address: '北京市朝陽區某某街道某某小區',bio: '熱愛生活，熱愛編程。'};// 填充表單this.form = { ...userInfo };},methods: {// 選擇頭像chooseAvatar() {uni.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album', 'camera'],success: (res) => {const tempFilePaths = res.tempFilePaths;this.form.avatar = tempFilePaths[0];// 實際場景中應該先上傳圖片，再獲取圖片的URLthis.uploadAvatar(tempFilePaths[0]);}});},// 上傳頭像uploadAvatar(filePath) {uni.showLoading({title: '上傳中...'});// 模擬上傳setTimeout(() => {uni.hideLoading();uni.showToast({title: '頭像上傳成功',icon: 'success'});// 實際場景中，這里應該返回服務器的圖片URL// this.form.avatar = res.data.url;}, 1500);},// 生日改變onBirthdayChange(e) {this.form.birthday = e.detail.value;},// 驗證單個字段validateField(field) {if (!this.rules[field]) return;const descriptor = {};descriptor[field] = this.rules[field];const validator = new Schema(descriptor);const source = {};source[field] = this.form[field];validator.validate(source, (errors) => {if (errors) {// 有錯誤this.$set(this.errors, field, errors[0].message);} else {// 沒有錯誤this.$set(this.errors, field, '');}});},// 驗證所有字段validateForm() {return new Promise((resolve, reject) => {const validator = new Schema(this.rules);validator.validate(this.form, (errors) => {if (errors) {// 有錯誤const errorObj = {};errors.forEach(error => {errorObj[error.field] = error.message;});this.errors = errorObj;resolve(false);} else {// 驗證通過this.errors = {};resolve(true);}});});},// 提交表單async submitForm() {const valid = await this.validateForm();if (!valid) {uni.showToast({title: '請正確填寫表單信息',icon: 'none'});return;}// 顯示加載提示uni.showLoading({title: '保存中...'});// 模擬提交請求setTimeout(() => {uni.hideLoading();uni.showToast({title: '保存成功',icon: 'success'});// 返回上一頁setTimeout(() => {uni.navigateBack();}, 1500);}, 1500);/* 實際場景中的提交代碼try {const res = await uni.request({url: 'https://api.example.com/update-profile',method: 'POST',data: this.form,header: {'content-type': 'application/json','Authorization': `Bearer ${uni.getStorageSync('token')}`}});if (res.statusCode === 200 && res.data.code === 0) {uni.hideLoading();uni.showToast({title: '保存成功',icon: 'success'});// 更新本地存儲的用戶信息uni.setStorageSync('userInfo', res.data.data.userInfo);// 返回上一頁setTimeout(() => {uni.navigateBack();}, 1500);} else {throw new Error(res.data.message || '保存失敗');}} catch (error) {uni.hideLoading();uni.showToast({title: error.message || '網絡錯誤，請稍后重試',icon: 'none'});}*/}}
}
</script><style scoped>
.profile-form {padding: 30rpx;
}.form-header {display: flex;justify-content: center;margin-bottom: 50rpx;
}.avatar-wrapper {display: flex;flex-direction: column;align-items: center;
}.avatar {width: 150rpx;height: 150rpx;border-radius: 50%;margin-bottom: 10rpx;
}.edit-hint {font-size: 24rpx;color: #666;
}.form-content {margin-bottom: 40rpx;
}.form-item {margin-bottom: 40rpx;position: relative;
}.label {display: block;margin-bottom: 10rpx;font-size: 28rpx;color: #333;
}.input, .textarea, .picker-box {width: 100%;border: 1rpx solid #dcdfe6;border-radius: 8rpx;padding: 0 20rpx;box-sizing: border-box;font-size: 28rpx;
}.input, .picker-box {height: 80rpx;line-height: 80rpx;
}.textarea {height: 160rpx;padding: 20rpx;line-height: 1.5;
}.picker-box {display: flex;justify-content: space-between;align-items: center;
}.picker-text {color: #333;
}.picker-arrow {color: #999;transform: rotate(90deg);
}.radio-group {display: flex;margin-top: 10rpx;
}.radio-item {display: flex;align-items: center;margin-right: 50rpx;
}.radio-box {width: 40rpx;height: 40rpx;border: 2rpx solid #dcdfe6;border-radius: 50%;display: flex;justify-content: center;align-items: center;box-sizing: border-box;position: relative;
}.radio-box.checked {border-color: #2979ff;
}.radio-box.checked:after {content: '';width: 20rpx;height: 20rpx;border-radius: 50%;background-color: #2979ff;position: absolute;
}.radio-label {margin-left: 10rpx;font-size: 28rpx;
}.error-tip {position: absolute;left: 0;bottom: -36rpx;font-size: 24rpx;color: #f56c6c;
}.submit-btn {margin-top: 60rpx;
}
</style>