uni-app表單組件(form表單)用法舉例
前言
本文分享的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è)務(wù)場景中 主要承擔的職責 是一個 信息錄入 的職能，換句話說，所有信息錄入的功能都可以考慮使用form表單來實現(xiàn)，如注冊，賬號找回，個人信息填寫，問卷調(diào)查等等~
二. 基礎(chǔ)用法
基礎(chǔ)用法如下：
<form></form>
form和絕大多數(shù)標簽一樣是 雙標簽 的，也就是說它具有閉合標簽，因此書寫標簽時不可遺漏閉合標簽，如下這種即是 錯誤示例：
<!--- 錯誤示例 ---> <form />
但這個只是容器，實際開發(fā)中不可能會這么使用，畢竟不會有哪個業(yè)務(wù)場景只有一個殼，而殼里面啥內(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)部組件信息，事件說明如下：
| 屬性名 | 類型 | 說明 | 平臺差異說明 |
|---|---|---|---|
| @submit | EventHandle | 攜帶 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 事件，其值對應(yīng)一個函數(shù)，再通過將 button 的 form-type 設(shè)置成 submit 即可實現(xiàn)點擊按鈕時 聯(lián)動觸發(fā)form表單的submit事件，其表現(xiàn)形態(tài) 效果圖 如下：
其實，到這里還沒有完成，當我們按照說明去使用的時候，發(fā)現(xiàn)e.detail中并沒有如期望的那般獲取到對應(yīng)的值，具體內(nèi)容如下圖
detail中并沒有如說明中存在的對應(yīng)的值，原因是因為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é)果如下：
如說明所說，正常獲取到預(yù)期的值了；
四. @reset事件
@reset事件，觸發(fā)后用于 重制內(nèi)部組件的值，換句話說，相當于把內(nèi)部組件的值都給清空掉，事件說明如下：
| 屬性名 | 類型 | 說明 | 平臺差異說明 |
|---|---|---|---|
| @reset | EventHandle | 表單重置時會觸發(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對應(yīng)的事件會在組件的值被清空時同時觸發(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屬性，這是一對 應(yīng)用于微信小程序中模板消息的屬性，屬性說明如下：
| 屬性名 | 類型 | 說明 | 平臺差異說明 |
|---|---|---|---|
| report-submit | Boolean | 是否返回 formId 用于發(fā)送模板消息(opens new window) | 微信小程序、支付寶小程序 |
| report-submit-timeout | number | 等待一段時間（毫秒數(shù)）以確認 formId 是否生效。如果未指定這個參數(shù)，formId 有很小的概率是無效的（如遇到網(wǎng)絡(luò)失敗的情況）。指定這個參數(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表單組件都提供表單驗證功能，通過設(shè)置一定的規(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>
通過設(shè)置 rules 可以給組件綁定一些驗證規(guī)則，如上例中的規(guī)則就是存在兩個，分別是：
- 輸入框不可為空，觸發(fā)方式為失去焦點時觸發(fā)；
- 輸入框內(nèi)容最短長度時3個字符，最長長度為5個字符，觸發(fā)方式為失去焦點時觸發(fā)；
很明顯，有規(guī)則校驗的form表單更符合實際的應(yīng)用場景，但很遺憾，內(nèi)置組件并沒有，有需求可以使用類似于 uView組件庫 或者到 插件商城 自行查找對應(yīng)組件～
七. demo示例演示
7.1 場景說明
本節(jié)以form表單組件結(jié)合一個 問卷調(diào)查形態(tài)的form表單，表單內(nèi)部有以下組件：
- 姓名，輸入框組件
- 性別，單選框組件
- 愛好，復(fù)選框組件
- 自我評價，多行輸入框組件
接著通過 按鈕 獲取到這些輸入框中對應(yīng)的值，并打印顯示到頁面～
(PS：對于input，textarea等各個組件的用法可以參照Form表單系列中的對應(yīng)組件說明~)
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è)務(wù)場景中，表單的使用頻率是非常高的，無論是移動端還是PC端都離不開表單，畢竟任何一個應(yīng)用都會存在一些信息錄入的功能~
到此這篇關(guān)于uni-app表單組件(form表單)用法舉例的文章就介紹到這了,更多相關(guān)uni-app表單form組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
前一篇《關(guān)于selector性能比賽》中提到，目測覺得在$("div,p,a")這樣有逗號時，sizzle耗時異常（600多個元素，花了200ms），說是它可能沒有優(yōu)化ie下的排序。2011-01-01
javascript實現(xiàn)修改微信分享的標題內(nèi)容等
這篇文章主要介紹了javascript實現(xiàn)修改微信分享的標題內(nèi)容等,需要的朋友可以參考下2014-12-12
一文詳解JavaScript中的相等運算符與類型轉(zhuǎn)換
在?JavaScript?編程中,相等運算符和類型轉(zhuǎn)換是理解語言行為的關(guān)鍵部分,雖然這些概念看似簡單,但它們的細節(jié)可能會導(dǎo)致意想不到的結(jié)果,本文將深入探討?==?和?===?運算符的區(qū)別、對象比較、以及?JavaScript?中的顯式和隱式類型轉(zhuǎn)換,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細介紹了js制作網(wǎng)站首頁圖片輪播特效代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
confirm可以彈出確定取消對話框，然后根據(jù)用戶的選擇執(zhí)行相應(yīng)的操作，接下來介紹實現(xiàn)過程，需要了解的朋友可以參考下2013-01-01
這篇文章主要介紹了javascript中Function類型詳解的相關(guān)資料,需要的朋友可以參考下2015-04-04
JavaScript(js)處理的HTML事件、鍵盤事件、鼠標事件簡單示例
這篇文章主要介紹了JavaScript(js)處理的HTML事件、鍵盤事件、鼠標事件,結(jié)合實例形式分析了JavaScript針對HTML事件、鍵盤事件及鼠標事件的簡單處理方法,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)簡易聊天對話框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
本篇文章主要是對js中判斷用戶輸入的值是否為空的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
webpack學(xué)習教程之前端性能優(yōu)化總結(jié)
webpack是近期最火的一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。這篇文章主要給大家總結(jié)介紹了關(guān)于webpack學(xué)習教程之前端性能優(yōu)化的相關(guān)資料，需要的朋友可以參考下。2017-12-12