在這個(gè)離線系統(tǒng)中，表單無疑是構(gòu)成這個(gè)離線系統(tǒng)的視圖部分，作為最前端，與客戶的操作最密切相關(guān)的一塊，所以我們有必要先了解一下HTML5的Forms API，它有如下特性：
表單仍然使用Form元素作為容器，我們可以在其中設(shè)置基本的提交性質(zhì)；
用戶或者開發(fā)人員提交頁面的時(shí)候，表單仍用于向服務(wù)器端發(fā)送表單中控件的值；
沿用之前的表單控件及其使用方法，并不斷發(fā)展和增加新的控件和功能；
可以用腳本操作表單控件；
新的輸入型控件：
類型 | 用途 |
input type=datetime | 時(shí)間和日期輸入框 |
input type=datetime-local | 本地的時(shí)間和日期輸入框 |
input type=date | 日期輸入框 |
input type=month | 年月輸入框 |
input type=time | 時(shí)間輸入框 |
input type=week | 星期輸入框 |
input type=number | 數(shù)值輸入框 |
input type=tel | 電話號(hào)碼輸入框 |
input type=email | 電子郵件地址文本框 |
input type=url | URL地址文本框 |
input type=search | 用于搜索文本框 |
input type=range | 特定范圍的數(shù)值選擇器，以進(jìn)度條方式顯示 |
input type=color | 顏色選擇器（這個(gè)不使用） |
下面這些元素很多我們會(huì)在離線填報(bào)表單里面使用到,可以復(fù)制拿到Chrome瀏覽器里面試試看：
日期格式文本框：
<p>
<label for="date">date類型：</label>
<input type="date" id="date"><span>請(qǐng)?jiān)谛掳?/span>Chrome中查看</span>
</p>
時(shí)間格式文本框：
<p>
<label for="time">time類型：</label>
<input type="time" id="time"><span>請(qǐng)?jiān)谛掳?span style="font-family: Times New Roman;">Chrome中查看</span>
</p>
月份格式文本框：
<p>
<label for="month">month類型：</label>
<input type="month" id="month"><span>請(qǐng)?jiān)谛掳?span style="font-family: Times New Roman;">Chrome中查看</span>
</p>
周格式文本框：
<p>
<label for="week">week類型：</label>
<input type="week" id="week"><span>請(qǐng)?jiān)谛掳?span style="font-family: Times New Roman;">Chrome中查看</span>
</p>
電話號(hào)碼輸入文本框：
<p>
<label for="tel">tel類型：</label>
<input type="tel " id="week"><span>請(qǐng)?jiān)谛掳?span style="font-family: Times New Roman;">Chrome中查看</span>
</p>
數(shù)值類型輸入文本框：
value指的是初始時(shí)的默認(rèn)值，min為最小值，max為最大值,step為增量和減量均為某個(gè)值，
或者某個(gè)值的倍數(shù)，如我們下面是3，所以它只是3，或者3的倍數(shù)：
<p>
<label for="number">number類型：</label>
<input type="number" name="number" id="number" step="3" value="3" min="0" max="4" >
<span>請(qǐng)?jiān)谛掳?/span>Chrome中查看</span>
</p>
滑動(dòng)條Range：
范圍：value：指的是初始時(shí)的默認(rèn)值，min為最小值，max為最大值,step為增量和減量均為1,這邊加了個(gè)
函數(shù)，用以實(shí)時(shí)顯示range的進(jìn)度條：
<p>
<label for="range">range類型：</label>
<input type="range" id="range" min="1" max="100" step="1" value="36" onchange="changeRange(this.value)"/>
<span id=”ShowRange” ></span>
<span>請(qǐng)?jiān)谛掳?/span>Opera或Chrome或Safari中查看</span>
</p>
function changeRange(rangeVal) {
$("#ShowRange").html(rangeVal+"%");
}
Placeholder：默認(rèn)輸入框描述文字：
Placeholder：（placeholder指的是默認(rèn)的文字，當(dāng)用戶沒有輸入值的時(shí)候，輸入型控件可以通過placeholder進(jìn)行描述性說明或提示，當(dāng)焦點(diǎn)聚焦或者輸入文本的時(shí)候，placeholder會(huì)消失）：
<input type="text" placeholder="對(duì)文本框的描述…" />
Autocomplete : 自動(dòng)完成
autocomplete="on"，作用：保存輸入值以備將來使用，autocomplete="off"，不保存，
autofocus="autofocus"：默認(rèn)載入聚焦
電子郵件文本框Email：
<p>
<label for="email">email類型：</label>
<input type="email" name="email" id="email" placeholder="請(qǐng)輸入正確mail地址" />
<span>請(qǐng)?jiān)谛掳鍯hrome中查看</span>
</p>
Email文本框要求必須輸入的是正確的郵箱地址，否則的會(huì)有錯(cuò)誤提示
URL文本框：
<p>
<label for="url">url類型：</label>
<input type="url" id="url" autocomplete="off" placeholder="請(qǐng)輸入正確URL地址" autofocus="autofocus">
<span>請(qǐng)?jiān)谛掳娴?/span>Chrome中查看效果</span>
</p>
URL文本框要求必須輸入的是郵箱地址，否則的會(huì)有錯(cuò)誤提示：
Search搜索框：
帶有搜索框樣式的input控件，
<p>
<label for="search">search類型：</label>
<input type="search" results="n" id="search">
<span>請(qǐng)?jiān)谛掳?/span>Chrome中查看</span>
</p>
HTML5使用ValidityState對(duì)象來反饋表單的驗(yàn)證狀態(tài)
var checkResult = input.validity;
if(checkResult.valid) console.debug(“驗(yàn)證通過”);
else console.debug(“驗(yàn)證失敗”);
驗(yàn)證的通過或者失敗取決于HTML5 引進(jìn)的八種驗(yàn)證約束條件，如果全部通過，則返回True，只要有一個(gè)未通過，則返回False。
1、 valueMissing
目的：確保表單控件中的值有填寫
用法：在表單控件中將required屬性設(shè)為true
示例：<input type="text" required="true" />
2、 typeMismatch
目的：確?？丶?nèi)的值與控件的類型相同（如number，email，url）
用法：指定表單頁面的type特征值
示例：<input type="email" />
3、 patternMismatch
目的：根據(jù)表單控件上設(shè)置的格式規(guī)則驗(yàn)證輸入是否為有效格式。
用法：在表單控件上設(shè)置pattern特性，井賦予適當(dāng)?shù)钠ヅ湟?guī)則，title是你要反饋給用戶的自定義錯(cuò)誤信息。
示例：<input type=”text” title = "請(qǐng)?zhí)顚憯?shù)值，可以包含1-4位的小數(shù)", placeholder = "請(qǐng)?zhí)顚憯?shù)值...", pattern = "^[0-9]+(.[0-9]{1,4})?$"/>
4、 tooLong
目的：避免輸入值包含過多字符。
用法：在表單控件上設(shè)置maxLength特性。
示例：<input type="text" maxLength="30">
5、 rangeUnderflow
6、 rangeOverflow
目的：限制數(shù)值型控件的最小值和最大值。
用法：為表單控件設(shè)置min/max特性，并賦予允許的最小值/最大值。
示例：<input type="range" name="ageCheck" min="18" max="80" />
7、 stepMismatch
目的：確保輸入值符合min、max及step即設(shè)置。
用法：為表單控件設(shè)置step特性，指定數(shù)值的增量。
示例：<input type="range" min="0" max="100" step="5">
8、 customError
目的：開發(fā)人員的自定義錯(cuò)誤信息，處理應(yīng)用代碼明確設(shè)置及計(jì)算產(chǎn)生的錯(cuò)誤。
用法：調(diào)用setCustomValidity(message)將表單控件置于customError狀態(tài)。
示例：
<input type="text" oninput="checkNumuric(this)" />
Script:
function checkNumuric(input) {
var checkValue = input.value;
var reg = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
if (!reg.test(checkValue)) input.setCustomValidity('您需要輸入正確的網(wǎng)址！');
else input.setCustomValidity('');
}
1、 form元素的 novalidate 屬性，關(guān)閉表單驗(yàn)證，可以不同區(qū)域做這個(gè)設(shè)置，來對(duì)某些提交的數(shù)據(jù)驗(yàn)證，某些不驗(yàn)證。
2、 input 元素的 formnovalidate屬性，可以對(duì)該元素啟動(dòng)或停止驗(yàn)證
3、 sumbmit 元素的 formnovalidate屬性，可以對(duì)整個(gè)表單啟動(dòng)或停止驗(yàn)證，相當(dāng)與form 元素的 novalidate屬性
我們的離線系統(tǒng)中有用到上面的一部分表單元素，如我們的用戶信管理表單：
1 <div class="UserInfo" > 2 3 <div class="UserInfoSingle"> 4 <span class="UserInfoH" >姓名：</span> 5 <span class="UserInfoC" > <input id="UserName" name="UserName" type="text" placeholder="Your UserName" required="required" /> </span> 6 </div> 7 8 <div class="UserInfoSingle"> 9 <span class="UserInfoH" >性別：</span> 10 <span class="UserInfoC" > 11 <select id="UserSex" name="UserSex" style="width:65px; " >12 <option value="0" >男</option>13 <option value="1" >女</option>14 </select>15 </span> 16 </div>17 18 <div class="UserInfoSingle"> 19 <span class="UserInfoH" >入職時(shí)間：</span> 20 <span class="UserInfoC" > <input class="calinput" id="ReportDutyTime" name="ReportDutyTime" readonly="readonly" onclick="return showCalendar('ReportDutyTime', 'y-mm-dd');" type="text" placeholder="Report Duty Time..." required="required" /> </span> 21 </div>22 23 <div class="UserInfoSingle"> 24 <span class="UserInfoH" >工號(hào)：</span> 25 <span class="UserInfoC" > <input type="text" id="JobNumber" name="JobNumber" placeholder="Your Job Number..." required="required" pattern="^[0-9]{7}" title="工號(hào)必須為7位數(shù)字..." /> </span> 26 </div>27 28 <div class="UserInfoSingle"> 29 <span class="UserInfoH" >部門：</span> 30 <span class="UserInfoC" > <input type="text" id="DepartmentNumber" name="DepartmentNumber" placeholder="Your Department Number..." required="required" /> </span> 31 </div> 32 <input type="submit" value="保存" style="float:right;margin:10px 65px 0 0" />33 </div>
頁面效果如下：
本文源碼：CRX_Mail_Form
聯(lián)系客服
