樓主現在大三考研狗一枚，現在考研和學技術一起抓，寫點東西記錄自己的成長，各位看官多多海涵。
書上的內容貼出：
ValidityState對象
ValidityState對象是通過validity 屬性獲取的，該對象有8個屬性，分別針對8個方面的錯誤驗證，屬性值均爲布爾值。
1．valueMissing屬性
必填的表單元素的值爲空。
如果表單元素設置了required特性，則爲必填項。如果必填項的值爲空，就無法通過表單驗證，valueMissing屬性會返回true，否則返回false。
2．typeMismatch屬性
輸入值與type類型不匹配。
HTML 5新增的表單類型如email、number、url等，都包含一個原始的類型驗證。如果用戶輸入的內容與表單類型不符合，則typeMismatch屬性將返回true，否則返回false。
3．patternMismatch屬性
輸入值與pattern特性的正則不匹配。
表單元素可通過pattern特性設置正則表達式的驗證模式。如果輸入的內容不符合驗證模式的規則，則patternMismatch屬性將返回true，否則返回false。
4．tooLong屬性
輸入的內容超過了表單元素的maxLength 特性限定的字符長度。
表單元素可使用maxLength特性設置輸入內容的最大長度。雖然在輸入的時候會限制表單內容的長度，但在某種情況下，如通過程序設置，還是會超出最大長度限制。如果輸入的內容超過了最大長度限制，則tooLong屬性返回true，否則返回false。
5．rangeUnderflow屬性
輸入的值小於min特性的值。
一般用於填寫數值的表單元素，都可能會使用min特性設置數值範圍的最小值。如果輸入的數值小於最小值，則rangeUnderflow屬性返回true，否則返回false。
6．rangeOverflow屬性
輸入的值大於max特性的值。
一般用於填寫數值的表單元素，也可能會使用max特性設置數值範圍的最大值。如果輸入的數值大於最大值，則rangeOverflow屬性返回true，否則返回false。
7．stepMismatch屬性
輸入的值不符合step特性所推算出的規則。
用於填寫數值的表單元素，可能需要同時設置min、max和step特性，這就限制了輸入的值必須是最小值與step特性值的倍數之和。如範圍從0到10，step特性值爲2，因爲合法值爲該範圍內的偶數，其他數值均無法通過驗證。如果輸入值不符合要求，則stepMismatch屬性返回true，否則返回false。
8．customError屬性
使用自定義的驗證錯誤提示信息。
有時候，不太適合使用瀏覽器內置的驗證錯誤提示信息，需要自己定義。當輸入值不符合語義規則時，會提示自定義的錯誤提示信息。
通常使用setCustomValidity()方法自定義錯誤提示信息：setCustomValidity(message)會把錯誤提示信息自定義爲message，此時customError屬性值爲true；setCustomValidity("")會清除自定義的錯誤信息，此時customError屬性值爲false。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Html5表單</title>
<script type="text/javascript">
function calculate(){
var length=document.loandata.length.value;
var width=document.loandata.width.value;
var height=document.loandata.height.value;
//var area=document.getElementById("area");
//var volume=document.getElementById("volume");
area.innerHTML=length*width;
volume.innerHTML=length*width*height;
}
function checkForm(frm){
if(frm.myEmail.checkValidity()){/* 顯式驗證郵件*/
//alert("郵件格式正確!");
//return true;
}else{
//alert("郵件格式錯誤! ");
//return false;
}
var name=frm.name3;
if(name.value==""){
//name.setCustomValidity("請填寫您的姓名! ");//自定義錯誤提示
}else{
//name.setCustomValidity("");//取消自定義錯誤提示
}
}
function invalidHandler(evt){
//獲取當前被驗證的對象 FireFox暫不兼容
var validity=evt.srcElement.validity ;
//檢測ValidityState對象的valueMissing屬性
if(validity.valueMissing){
alert("姓名是必填項，不能爲空");
}
//如果不希望瀏覽器默認的錯誤提示方式，可以使用下面的方式取消
evt.preventDefault();
//阻止事件冒泡
evt.stopPropagation();
}
window.οnlοad=function(){
var name=document.getElementById("name3");
//註冊監聽invalid事件
name.addEventListener("invalid",invalidHandler,false);
}
</script>
</head>
<body>
<form action="helloWord.html" name="loandata" id="form1" method="post">
<table>
<tr><th>輸入長寬高的數值：</th></tr>
<tr>
<td>1) 矩形的長度是：</td>
<td><input type="text" name="length" placeholder="請輸入長度"></td>
</tr>
<tr>
<td>2) 矩形的寬度是：</td>
<td><input type="text" name="width" autofocus="autofocus"></td>
</tr>
<tr>
<td>3) 矩形的高度是：</td>
<td><input type="text" name="height" autocomplete="on"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="運行" οnclick="calculate()"></td>
</tr>
<tr>
<td><b>矩形的面積和體積分別是：</b></td>
</tr>
<tr>
<td>矩形的面積是：</td>
<td><span class="result" id="area"></span></td>
</tr>
<tr>
<td>矩形的體積是：</td>
<td><span class="result" id="volume"></span></td>
</tr>
</table>
<input type="radio" value="男" name="sex" checked="checked">男
<input type="radio" value="女" name="sex">女<br/>
<input type="url" name="webUrl" id="webUrl" value="http://www.baidu.com"><br/>
<input type="email" name="myEmail" value="[email protected]" list="emaillist"><br/>
<datalist id="emaillist">
<option>[email protected]</option>
<option>[email protected]</option>
</datalist>
<input type="range" name="volume" id="volume" min="0" max="150" step="10" value="20" οnchange="x.value=this.value">
<output name="x">20</output> <br/>
<input type="number" name="score" id="score" min="0" max="150" step="10"><br/>
<input type="tel" ><br/>
<input type="search" ><br/>
<input type="color" ><br/>
<input type="date" ><br/>
<input type="month" ><input type="week"><input type="time"><input type="datetime"><input type="datetime-local"><br/>
<input type="submit" value="提交到Page1" formaction="htmls/1.html">
<input type="submit" value="提交到Page2" formaction="?page=2">
<input type="submit" value="提交到Page3" formaction="?page=3">
<input type="submit" value="提交" οnclick="return checkForm(this.form)"><br/>
<input type="text" name="name2"><br/>
Encryption:
<keygen name="security" ><!-- 加入祕鑰安全 -->
<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="6位郵政編碼">
<input type="text" id="name3" name="name3" placeholder="First and Last Name" required><br/>
</form>
<input name="name1" type="text" form="form1" required>
</body>
</html>
經過測試後發現：也是有好多功能FireFox還沒有實現兼容，使用360瀏覽器感覺大部分還是實現了支持的。
時間太晚了，後續詳細內容以後再來補充。