iH5高級教程:H5數據應用,多種數據的判斷

下面我們一起來學習iH5高級教程:H5數據應用,多種數據的判斷

工具/原料

iH5

方法/步驟

1.選中舞台,點擊圖片工具,上傳背景圖。

2.選中舞台,點擊頁面工具,新建一個頁面。選中頁面,點擊中文字體工具,添加「姓名」、「地址」、「電話」3個中文字體,點擊文本工具,添加「姓名為空」、「地址為空」、「請輸入小於12位的地址」、「電話為空」、「請輸入正確的電話號碼」、「電話不是11位數」的判斷顯示文字。

3.選中頁面,點擊按鈕工具,添加一個按鈕,在按鈕里輸入內容為「提交」的文字。

1.選中頁面1,在相應的位置添加3個輸入框,分別可以輸入姓名、地址和電話。

2.選中舞台,添加一個資料庫。

3.選中資料庫,點擊文本欄位工具,添加3個文本欄位,分別將3個文本欄位名稱設置為姓名、地址和電話,並將這3個文本欄位分別綁定頁面1下的3個輸入框,使內容能錄入到後台資料庫,注意這裡的文本欄位是一定要輸入的。

4.選中提交按鈕,點擊事件工具,添加一個事件,觸發條件為手指按下(或輕觸),目標對象為資料庫1,目標動作為提交。這個是將已輸入數據提交到資料庫的關鍵事件。有了這個事件的觸發才可以提交到數據到資料庫。

1.選中舞台,點擊圖片工具,上傳一張提交後顯示的圖,重命名為「提交成功」,並將其前面的勾去掉,隱藏圖片,使圖片在案例播放時初始處於隱藏狀態。

2.選中資料庫,點擊事件工具,添加一個事件,觸發條件為提交完成,目標對象為「提交成功」圖片,目標動作為顯示。

1.選中「輸入框1」,在輸入框1下添加一個事件,觸發條件為輸入為空,目標對象為文本1,即「姓名為空」的文本,目標動作為顯示。

2.選中「輸入框2」,在輸入框2下添加兩個事件,事件1的觸發條件為輸入為空,目標對象為文本2,即「地址為空」的文本,目標動作為顯示。事件2的觸發條件「為長度大於(提交時判斷)」,值為12,目標對象為文本3,即「請輸入小於12位的地址」,目標動作為顯示。

3.選中「輸入框3」,在輸入框3下添加3個事件。事件1的觸發條件為輸入為空,目標對象為文本4,即「電話為空」的文本,目標動作為顯示。事件2的觸發條件為不是數字(提交時判斷),目標對象為文本6,即「請輸入正確的電話號碼」的文本,目標動作為顯示。事件3的觸發條件為長度不等於(提價時判斷),值為11,目標對象為文本5,即「電話不是11位」的文本。

1.在輸入框1下添加一個事件,觸發條件是點擊(或輕觸),目標對象是文本1,目標動作為隱藏。

2.選中輸入框2,在輸入框2下添加一個事件,觸發條件是點擊(或輕觸),目標對象是文本2,目標動作為隱藏。

3.選中輸入框3,在輸入框3下添加三個事件,觸發條件是點擊(或輕觸),目標對象分別是文本4、文本5和文本6,目標動作為隱藏。

.選中舞台,點擊時間軸工具,添加一個2秒的時間軸,將自動播放設置為No。

2.選中時間軸,點擊事件工具,添加6個事件。這6個事件除了目標對象外,是相同的。這6個事件的觸發條件都是結束,目標對象分別是文本1至文本6,目標動作是隱藏。

3.在頁面1的文本1至文本6下分別添加一個事件。這6個事件是相同的,觸發條件都是顯示,目標對象都是舞台下的時間軸1,目標動作是從頭播放。

先行知識:事件、時間軸、資料庫

重點控制項:資料庫、輸入框、文本欄位、事件

知識點:

1、輸入為空:判斷輸入框是否為空,有兩種判斷方式(失焦時判斷,提交資料庫事件觸發時判斷)

2、長度大於(提交時判斷):判斷輸入框的值長度是否大於多少,此判斷條件需在資料庫提交事件觸發時才進行判斷,若判斷輸入的值長度大於預先設置長度則資料庫提交不成功。

3、長度不等於(提交時判斷):判斷輸入框的值長度不等於多少,此判斷條件需在資料庫提交事件觸發時才進行判斷,若判斷輸入的值長度不等於預先設置長度則資料庫提交不成功。

4、不是數字(提交時判斷):判斷輸入框的值不是數字,此判斷條件需在資料庫提交事件觸發時才進行判斷,若判斷不是數字則資料庫提交不成功。

重點事件:

觸發對象:按鈕

觸發條件:手指按下目標對象:資料庫

目標動作:提交

觸發對象:輸入框

觸發條件:輸入為空

輸入時判斷:NO目標對象:文本

目標動作:顯示

觸發對象:輸入框

觸發條件:長度大於(提交時判斷)

值:12目標對象:文本

目標動作:顯示

觸發對象:輸入框

觸發條件:不是數字(提交時判斷)目標對象:文本

目標動作:顯示

觸發對象:輸入框

觸發條件:長度不等於(提交時判斷)

值:11目標對象:文本

目標動作:顯示

TIPS:

1.資料庫提交:所有數據必須有提交到資料庫的事件才能將數據提交到資料庫後,否則後台是無法獲取用戶輸入的數據的。

2.文本欄位綁定輸入框:文本欄位的欄位名稱必須輸入,而且需要綁定輸入框方可將輸入框的內容通過提交到資料庫的事件傳送至資料庫後台。

3.提示顯示後自動隱藏:通過時間軸的播放,結束後事件的觸發使提示文本隱藏。

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場