HTML5與CSS3權威指南.pdf3

標籤：blog   http   使用   io   檔案   資料   for   2014   

表單驗證

<input name="text" type="text" required pattern="^\w.*$">

required屬性，可以應用在大多數的元素上，如果元素內容為空白，則不允許提交

pattern屬性，將屬性設定為某個格式的Regex

<input pattern=‘[0-9][A-Z]{3}‘ name=part placeholder="輸入一個數字與三個大寫字母">

min屬性與max屬性，規定數實值型別或日期類型的input元素的專有屬性，限制其範圍

step屬性，控制input元素中值增加或減少的步幅，如果使用者輸入的值在0到100之間，必須是5的倍數

顯式驗證

form元素與input元素都有一個checkValidity方法（返回布爾值），調用該方法可以顯式地對錶單內的所有元素內容進行有效性驗證

var email=document.getElementById("email");

if(email.value==""){

　　　　alert("請輸入Email地址");

　　　　retuen false;

　　}

else if(!email.checkValidity()){

　　　　alert("請輸入正確的Email地址");

　　}

　　...

另外還有一個validity屬性，該屬性返回一個ValidityState對象，對象擁有很多屬性，其中valid屬性工作表示元素內容是否有效

取消驗證

如果需要臨時取消表單驗證，有兩種方法：

利用form元素的novalidate屬性（true為關閉驗證），它可以關閉整個表單驗證；

利用input元素或submit元素的formnovalidate屬性，使單個表單驗證失效

自訂錯誤資訊

調用input元素的setCustomValidity方法

pass2.setCustomValidity("密碼不一致!")

增強頁面元素

figure元素與figcaption元素

figure元素用來表示網頁上一塊獨立內容，figcaption元素是從屬元素（標題），且只允許擁有一個

details元素，可以將畫面的上局部地區展開或收縮，summary元素是從屬元素

<details>

　　<summary>xxxx<summary>

　　<p>詳細介紹</p>

</details>

mark元素，高亮，吸引使用者注意力

<mark>HTML5</mark>

progress元素，value屬性工作表示已經完成了多少工作量，max屬性工作表示總共有多少工作量

<p><progress id="p" max=100 value=10></progress></p>

meter元素，表示規定範圍內的數量值，擁有6個屬性：

vaule實際值，預設為0，可以是小數；min最小值，預設0；max最大值，預設1，如果它小於min，澤將min視為最大值；max規定範圍的下限值，必須小於等於high值，如果小於min值，則把min屬性視為low屬性值；high規定範圍的上限，同樣如果小於low，low視為high，如果大於max，則max視為high屬性的值；optimum最佳值，在max和min之間，可以大於high屬性值

<p><meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>

也可以不使用屬性<meter>80%</meter>

新增menu元素與command元素

這兩個元素用於Web應用程式的菜單、工具條、快顯功能表，menu相當於菜單，command相當於功能表項目

改良的ol元素，添加了start屬性與reversed屬性，ol元素列表預設從1開始，start屬性可以規定編號

<ol start=5>

<li>1111</li>

<li>2222</li>

</ol>

reversed屬性反向排序<li>元素<ol reversed>

改良的dl元素，在HTML中，di元素專門用來定義術語的列表，HTML5將該元素重新定義

<dl>

<dt>術語1</dt>

<dd>定義1</dd>

<dt>術語2</dt>

<dd>定義2</dd>

</dl>

cite元素表示作品的標題<cite></cite>

重新定義small元素，輔助資訊著作權資訊等

檔案API

 HTML5提供了檔案操作API，通過它訪問本地檔案系統

FileList對象與file對象：FileList對象表示使用者選擇的檔案清單，在HTML4中只允許放置一個檔案，HTML5中有multiple屬性，允許一次放置多個檔案，控制項內的每個使用者選擇的檔案都是一個file對象，FileList對象是file對象的列表，file對象有兩個屬性name屬性（表示檔案名稱，不包含路徑）lastModifiedDate屬性（表示檔案最後修改的日期）

<input type="file" id="file" multiple size="80"/>

file=document.getElementById("file").files[1];

Blob對象表示二進位的未經處理資料，可以通過該方法訪問到位元組內部的未經處理資料塊，有兩個屬性size屬性（Blob對象的位元組長度）type屬性（MIME類型，如果是未知類型，則返回Null 字元串）

上面提到過的file對象也繼承了Blob對象

files[0].size 　　files[0].type

FileReader介面用來把檔案讀入記憶體，並且讀取檔案中的資料

檢查瀏覽器是否支援FileReader介面

if(typeof FileReader==‘undefined‘){

　　alert("您得瀏覽器未實現FileReader介面")；

}else{

　　var reader=new FileReader();

　　//正常使用瀏覽器

}

FileReader介面的方法（4個方法，3個用於讀取檔案，一個用於中斷讀取）

無論讀取成功或者失敗，方法並不會返回結果，結果儲存在result屬性中

readAsText：兩個參數，第二公司文本的編碼方式，預設UTF-8

readAsBinaryString：讀取為二進位字串，傳到後端

readAsDataURL：將檔案讀取為Data URL字串

FileReader介面的事件