快捷導(dǎo)航

uni-app表單組件(form表單)用法舉例

更新時(shí)間：2022年12月26日 14:48:20 作者：Oliver尹

平時(shí)我們經(jīng)常會(huì)使用到表單,下面這篇文章主要給大家介紹了關(guān)于uni-app表單組件(form表單)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

本文分享的Form組件為uni-app的內(nèi)置組件Form，非擴(kuò)展組件，兩者在用法上其實(shí)大同小異，只是擴(kuò)展組件的屬性以及事件更多…沒有本質(zhì)上的區(qū)別～

一. 簡介

From，表單組件，具有數(shù)據(jù)收集、提交數(shù)據(jù)的功能，某種程度上說它就是一個(gè) 容器，這個(gè)容器內(nèi)部可以有 input 、checkbox、radio 、picker 等組件填充，原則上所有的表單組件都必須置入from組件，再通過form組件收集內(nèi)部組件數(shù)據(jù)并將內(nèi)容通過接口發(fā)送至后臺(tái)接收～
通過描述我們可以看出form表單在業(yè)務(wù)場景中 主要承擔(dān)的職責(zé) 是一個(gè) 信息錄入 的職能，換句話說，所有信息錄入的功能都可以考慮使用form表單來實(shí)現(xiàn)，如注冊(cè)，賬號(hào)找回，個(gè)人信息填寫，問卷調(diào)查等等~

二. 基礎(chǔ)用法

基礎(chǔ)用法如下：

<form></form>

form和絕大多數(shù)標(biāo)簽一樣是 雙標(biāo)簽 的，也就是說它具有閉合標(biāo)簽，因此書寫標(biāo)簽時(shí)不可遺漏閉合標(biāo)簽，如下這種即是 錯(cuò)誤示例：

<!--- 錯(cuò)誤示例 --->
<form />

但這個(gè)只是容器，實(shí)際開發(fā)中不可能會(huì)這么使用，畢竟不會(huì)有哪個(gè)業(yè)務(wù)場景只有一個(gè)殼，而殼里面啥內(nèi)容都沒有，常規(guī)示例代碼如下：

<form>
  <view class="form-group"><input placeholder="請(qǐng)輸入姓名" /></view>
  <view class="form-group">
    <radio-group >
      <radio>男</radio>
      <radio>女</radio>
    </radio-group>
  </view>
</form>

示例代碼中form組件作為容器，內(nèi)部具有input輸入框以及radio單選框存在，其表現(xiàn)形態(tài) 效果圖 如下：

三. @submit事件

@submit事件，觸發(fā)后用于 收集內(nèi)部組件信息，事件說明如下：

屬性名	類型	說明	平臺(tái)差異說明
@submit	EventHandle	攜帶 form 中的數(shù)據(jù)觸發(fā) submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}，report-submit 為 true 時(shí)才會(huì)返回 formId

示例代碼如下：

<form @submit="formSubmit">
  <view class="form-group"><input placeholder="請(qǐng)輸入姓名" /></view>
  <view class="form-group">
    <radio-group >
      <radio>男</radio>
      <radio>女</radio>
    </radio-group>
  </view>
  <!-- 新增button按鈕觸發(fā)submit事件 -->
  <view class="form-group"><button form-type="submit">Submit</button></view>
</form>

<script>
export default {
	methods: {
		formSubmit: function(e) {
			console.log(e);;
		}
	}
};
</script>

將from組件綁定 @submit 事件，其值對(duì)應(yīng)一個(gè)函數(shù)，再通過將 button 的 form-type 設(shè)置成 submit 即可實(shí)現(xiàn)點(diǎn)擊按鈕時(shí) 聯(lián)動(dòng)觸發(fā)form表單的submit事件，其表現(xiàn)形態(tài) 效果圖 如下：

其實(shí)，到這里還沒有完成，當(dāng)我們按照說明去使用的時(shí)候，發(fā)現(xiàn)e.detail中并沒有如期望的那般獲取到對(duì)應(yīng)的值，具體內(nèi)容如下圖

detail中并沒有如說明中存在的對(duì)應(yīng)的值，原因是因?yàn)閒orm內(nèi)部的組件必須加上 name屬性，示例代碼如下：

<form @submit="formSubmit">
  <view class="form-group"><input name="input" placeholder="請(qǐng)輸入姓名" /></view>
  <view class="form-group">
    <radio-group name="radio">
      <radio value="man">男</radio>
    	<radio value="woman">女</radio
    </radio-group>
  </view>
  <!-- 新增button按鈕觸發(fā)submit事件 -->
  <view class="form-group"><button form-type="submit">Submit</button></view>
</form>

給 input 和 radio 都加上 name屬性，加上后其結(jié)果如下：

如說明所說，正常獲取到預(yù)期的值了；

四. @reset事件

@reset事件，觸發(fā)后用于 重制內(nèi)部組件的值，換句話說，相當(dāng)于把內(nèi)部組件的值都給清空掉，事件說明如下：

屬性名	類型	說明	平臺(tái)差異說明
@reset	EventHandle	表單重置時(shí)會(huì)觸發(fā) reset 事件

用法和submit基本類似，示例代碼如下：

<form @reset="formReset">
  <view class="form-group"><input name="input" placeholder="請(qǐng)輸入姓名" /></view>
  <view class="form-group">
    <radio-group name="radio">
      <radio value="man">男</radio>
      <radio value="woman">女</radio>
    </radio-group>
  </view>
  <!-- 新增button按鈕觸發(fā)reset事件 -->
  <view class="form-group"><button form-type="reset">reset</button></view>
</form>

其表現(xiàn)形態(tài) 效果圖 如下：

同時(shí)，@reset對(duì)應(yīng)的事件會(huì)在組件的值被清空時(shí)同時(shí)觸發(fā)，如現(xiàn)在有一個(gè)reset事件，觸發(fā)時(shí)同時(shí)彈出彈窗，示例代碼如下：

<script>
export default {
	methods: {
		formReset: function(e) {
			console.log(e);
			uni.showModal({
				content: '觸發(fā)重制'
			});
		}
	}
};
</script>

其表現(xiàn)形態(tài) 效果圖 如下：

五. report-submit屬性與report-submit-timeout屬性

report-submit屬性 與 report-submit-timeout屬性，這是一對(duì) 應(yīng)用于微信小程序中模板消息的屬性，屬性說明如下：

屬性名	類型	說明	平臺(tái)差異說明
report-submit	Boolean	是否返回 formId 用于發(fā)送模板消息(opens new window)	微信小程序、支付寶小程序
report-submit-timeout	number	等待一段時(shí)間（毫秒數(shù)）以確認(rèn) formId 是否生效。如果未指定這個(gè)參數(shù)，formId 有很小的概率是無效的（如遇到網(wǎng)絡(luò)失敗的情況）。指定這個(gè)參數(shù)將可以檢測 formId 是否有效，以這個(gè)參數(shù)的時(shí)間作為這項(xiàng)檢測的超時(shí)時(shí)間。如果失敗，將返回 requestFormId:fail 開頭的 formId	微信小程序2.6.2

簡單的說，通過頁面的 form 組件，屬性 report-submit 為 true 時(shí)，可以聲明為需要發(fā)送模板消息，此時(shí)點(diǎn)擊 按鈕提交表單 可以獲取 formId，用于發(fā)送模板消息。
示例代碼如下

<form :report-submit="true" :report-submit-timeout="100">
  <!-- 其它組件 -->
</form>

值得注意的是，模板消息功能微信小程序中已經(jīng)不再支持了…對(duì)的，你沒看錯(cuò)，轉(zhuǎn)而支持的是 訂閱消息模板，有興趣的小伙伴可以仔細(xì)到小程序官網(wǎng)查看；

六. 注意事項(xiàng)

6.1 校驗(yàn)功能

uni-app內(nèi)置的form表單組件是不帶驗(yàn)證功能的，很多UI庫的form表單組件都提供表單驗(yàn)證功能，通過設(shè)置一定的規(guī)則校驗(yàn)內(nèi)部組件，可能有小伙伴不知道什么是驗(yàn)證功能，這里簡單的說一下吧，以element為例：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活動(dòng)名稱" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
        },
        rules: {
          name: [
            { required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個(gè)字符', trigger: 'blur' }
          ],
        }
      };
    },
  }
</script>

通過設(shè)置 rules 可以給組件綁定一些驗(yàn)證規(guī)則，如上例中的規(guī)則就是存在兩個(gè)，分別是：

輸入框不可為空，觸發(fā)方式為失去焦點(diǎn)時(shí)觸發(fā)；
輸入框內(nèi)容最短長度時(shí)3個(gè)字符，最長長度為5個(gè)字符，觸發(fā)方式為失去焦點(diǎn)時(shí)觸發(fā)；

很明顯，有規(guī)則校驗(yàn)的form表單更符合實(shí)際的應(yīng)用場景，但很遺憾，內(nèi)置組件并沒有，有需求可以使用類似于 uView組件庫 或者到 插件商城 自行查找對(duì)應(yīng)組件～

七. demo示例演示

7.1 場景說明

本節(jié)以form表單組件結(jié)合一個(gè) 問卷調(diào)查形態(tài)的form表單，表單內(nèi)部有以下組件：

姓名，輸入框組件
性別，單選框組件
愛好，復(fù)選框組件
自我評(píng)價(jià)，多行輸入框組件

接著通過按鈕獲取到這些輸入框中對(duì)應(yīng)的值，并打印顯示到頁面～

(PS：對(duì)于input，textarea等各個(gè)組件的用法可以參照Form表單系列中的對(duì)應(yīng)組件說明~)

7.2 demo實(shí)現(xiàn)代碼

<template>
	<view class="form-container">
		<!-- form演示 -->
		<view class="form-group">
			<h3>問卷調(diào)查</h3>
			<form class="form-main" @submit="formSubmit">
				<view class="form-group">
					<h4>姓名</h4>
					<view><input id="name" name="input" placeholder="請(qǐng)輸入姓名" /></view>
				</view>

				<view class="form-group">
					<h4>性別</h4>
					<radio-group name="radio">
						<radio value="man">男</radio>
						<radio value="woman">女</radio>
					</radio-group>
				</view>
				<view class="form-group">
					<h4>愛好</h4>
					<checkbox-group name="checkbox">
						<checkbox value="bb">籃球</checkbox>
						<checkbox value="fb">足球</checkbox>
						<checkbox value="wb">網(wǎng)球</checkbox>
					</checkbox-group>
				</view>
				<view class="form-group">
					<h4>自我評(píng)價(jià)</h4>
					<textarea name="textarea" class="text-style" placeholder="請(qǐng)輸入自我評(píng)價(jià)"></textarea>
				</view>
				<!-- 新增button按鈕觸發(fā)submit事件 -->
				<view class="form-group"><button form-type="submit">submit</button></view>
			</form>
		</view>
	</view>
</template>

<script>
export default {
	methods: {
		formSubmit: function(e) {
			console.log(e);
			uni.showModal({
				content: '問卷調(diào)查內(nèi)容：' + JSON.stringify(e.detail.value)
			});
		}
	}
};
</script>

其表現(xiàn)形態(tài) 效果圖 如下：

八. 小結(jié)

如果說 input，radio，checkbox等組件是表單組件的房屋建造中的磚瓦，那么form組件就是這個(gè)房子的鋼筋水泥的結(jié)構(gòu)骨架，只有在這個(gè)結(jié)構(gòu)骨架里才能為這個(gè)房子添磚加瓦；
在實(shí)際的業(yè)務(wù)場景中，表單的使用頻率是非常高的，無論是移動(dòng)端還是PC端都離不開表單，畢竟任何一個(gè)應(yīng)用都會(huì)存在一些信息錄入的功能~

到此這篇關(guān)于uni-app表單組件(form表單)用法舉例的文章就介紹到這了,更多相關(guān)uni-app表單form組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: