欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年12月26日 14:48:20   作者：Oliver尹  
平時我們經(jīng)常會使用到表單,下面這篇文章主要給大家介紹了關(guān)于uni-app表單組件(form表單)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

前言

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

一. 簡介

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

二. 基礎(chǔ)用法

基礎(chǔ)用法如下：

<form></form>

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

<!--- 錯誤示例 --->
<form />

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

<form>
  <view class="form-group"><input placeholder="請輸入姓名" /></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)部組件信息，事件說明如下：

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

示例代碼如下：

<form @submit="formSubmit">
  <view class="form-group"><input placeholder="請輸入姓名" /></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 事件，其值對應一個函數(shù)，再通過將 button 的 form-type 設置成 submit 即可實現(xiàn)點擊按鈕時 聯(lián)動觸發(fā)form表單的submit事件，其表現(xiàn)形態(tài) 效果圖 如下：

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

detail中并沒有如說明中存在的對應的值，原因是因為form內(nèi)部的組件必須加上 name屬性，示例代碼如下：

<form @submit="formSubmit">
  <view class="form-group"><input name="input" placeholder="請輸入姓名" /></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é)果如下：

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

四. @reset事件

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

屬性名類型說明平臺差異說明
@resetEventHandle表單重置時會觸發(fā) reset 事件

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

<form @reset="formReset">
  <view class="form-group"><input name="input" placeholder="請輸入姓名" /></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) 效果圖 如下：

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

<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屬性，這是一對 應用于微信小程序中模板消息的屬性，屬性說明如下：

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

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

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

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

六. 注意事項

6.1 校驗功能

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

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活動名稱" 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: '請輸入活動名稱', trigger: 'blur' },
            { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
          ],
        }
      };
    },
  }
</script>

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

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

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

七. demo示例演示

7.1 場景說明

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

  • 姓名，輸入框組件
  • 性別，單選框組件
  • 愛好，復選框組件
  • 自我評價，多行輸入框組件

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

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

7.2 demo實現(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="請輸入姓名" /></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>自我評價</h4>
					<textarea name="textarea" class="text-style" placeholder="請輸入自我評價"></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組件就是這個房子的鋼筋水泥的結(jié)構(gòu)骨架，只有在這個結(jié)構(gòu)骨架里才能為這個房子添磚加瓦；
在實際的業(yè)務場景中，表單的使用頻率是非常高的，無論是移動端還是PC端都離不開表單，畢竟任何一個應用都會存在一些信息錄入的功能~

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

相關(guān)文章

最新評論