引言
增加客戶端的表單驗證可以爲用戶提供更快的體驗，但決不能忽視的是，客戶端表單驗證永遠不應該取代服務器端的驗證，而只能是輔助和增強。根據經驗JavaScript驗證表單基本分爲以下幾方面的內容，必填字段、特殊模式匹配等，還要注意錯誤的提示方式對一個表單的可用性有着極其重要的影響。
2建立表單
首先建立一個具有代表性的表單來作爲本文的實例。
請見附件表單驗證V1(基本版)
//form.html
<html>
<head>
<title>Simple Form</title>
<link rel="stylesheet" href="form_style.css" type="text/css"/>
<script type="text/javascript" src="checkForm.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<form action="javascript:alert('提交成功');" method="POST">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name</label>
<input type="text" id="name" class="required text"/>
*<br/>
<label for="email">Email</label>
<input type="text" id="email" class="required email text"/><br/>
<label for="date">Date</label>
<input type="text" id="date" class="required date text"/><br/>
<label for="url">Website</label>
<input type="text" id="url" class="url text" value="http://"/><br/>
<label for="phone">Phone</label>
<input type="text" id="phone" class="phone text"/><br/>
<label for="age">Age</label>
<input type="text" id="age" class="required age text"/><br/>
<input type="submit" value="Submit Form" class="submit"/>
</fieldset>
</form>
</body>
</html>
再建立一個css樣式使其變的美觀
//form_style.css
form {
font-family: Arial;
font-size: 14px;
width: 300px;
}
fieldset {
border: 1px solid #CCC;
margin-bottom: 10px;
}
fieldset.login input {
width: 125px;
}
legend {
font-weight: bold;
font-size: 1.1em;
}
label {
display: block;
width: 60px;
text-align: right;
float: left;
padding-right: 10px;
margin: 5px 0;
}
input {
margin: 5px 0;
}
input.text {
padding: 0 0 0 3px;
width: 172px;
}
input.submit {
margin: 15px 0 0 70px;
}
這樣一個漂亮的表單就建立完成了。
提供客戶端驗證的主要優點在於，用戶可以有一個校驗他們輸入的實時反饋，從而全面提高表單的輸入體驗。但這並不等於，實現了客戶端的表單驗證就可以忽視或者刪除服務器端的驗證。應該繼續測試禁止JavaScript情況下的表單，確保不使用JavaScript的用戶可繼續擁有其他的可用性體驗。
3必填字段
字段驗證中最重要的可能就是必填字段（表示該條目用是戶必須填寫的）了。通常，這個必要條件可以簡化爲檢查字段的值是否爲空。但有時候，字段可能有一個默認的值，這就要求在注意這種可能性的同時要檢查用戶是否至少改變了字段默認值。這兩種檢查包含了表單字段的主要形式，包括<input type="text">，<select>和<textarea>。
儘管如此，當你試圖檢查用戶是否修改了必填的複選框或者單選框時，還是可能產生問題。要巧妙地解決這個問題，你需要找出所有擁有相同name（這是字段元素關聯的紐帶）的字段，然後檢查用戶是否選擇了其中的一個。
// checkForm.js
// 檢查輸入元素是否鍵入了信息的通用函數
function checkRequired( elem ) {
if ( elem.type == "checkbox" || elem.type == "radio" )
return getInputsByName( elem.name ).numChecked;
else
return elem.value.length > 0 && elem.value != elem.defaultValue;
}
// 找出指定name的所有input元素（對查找以及處理複選框或單選框十分有用）
function getInputsByName( name ) {
// 匹配的input元素的數組
var results = [];
// 追蹤被選中元素的數量
results.numChecked = 0;
// 找出文檔中的所有input元素
var input = document.getElementsByTagName("input");
for ( var i = 0; i < input.length; i++ ) {
// 找出所有指定name的字段
if ( input[i].name == name ) {
// 保存結果，稍後會返回
results.push( input[i] );
// 記錄被選中字段的數量
if ( input[i].checked )
results.numChecked++;
}
}
// 返回匹配的字段集合
return results;
}
// 等待文檔完成加載
window.onload = function(){
// 獲得表單並監聽提交事件
document.getElementsByTagName("form")[0].onsubmit = function(){
// 獲取需檢查的input元素
var elem = document.getElementById("age");
// 確保年齡的必填字段已經被選中
if ( ! checkRequired( elem ) ) {
// 否則顯示錯誤並阻止表單提交
alert( "Required field is empty – " );
return false;
}
// 獲取需檢查的input元素
var elem = document.getElementById("name");
// 確保名字字段有文本輸入
if ( ! checkRequired( elem ) ) {
// 否則顯示錯誤並阻止表單提交
alert( "Required field is empty – please provide your name." );
return false;
}
};
};
4模式匹配
驗證輸入元素（尤其是文本字段）的第二大組件是模式匹配，它檢驗字段的內容是否符合要求。
使用以下技術的要點在於明白無誤地定義字段的必須條件，否則，你可能會讓用戶產生困惑。比如日期格式會在特定文化的差異，甚至是不同規範的情況下而差別巨大。
以下是幾種驗證字段內容的技術，包括電子郵件地址、URL、電話號碼和日期。
（1）電子郵件
要求填寫電子郵件地址無疑是Web表單中再普通不過的需求了，因爲它是鑑定和交流的普遍手段。但要完全檢查電子郵件地址的正確性（取決於它的規則）卻非常複雜。你可以只概括性地檢查所有可能的輸入情況。
// 檢查指定的input元素是否包含電子郵件地址
// 檢查input元素內容是否符合emial地址要求的通用函數
function checkEmail( elem ) {
// 確保輸入的內容是正確的email地址
return elem.value == '' ||
/^[a-z0-9_+.-]+/@([a-z0-9-]+/.)+[a-z0-9]{2,4}$/i.test( elem.value );
}
// 獲取需要檢查的input元素
var elem = document.getElementById("email");
// 檢查這個字段是否正確
if ( ! checkEmail( elem ) ) {
alert( "Field is not an email address." );
}
（2）URL
表單（和其他的網絡相關區域）的一個常見需求是要求用戶輸入網站的URL。與電子郵件地址一樣，URL又是一個難以實現完全符合規範定義的例子，但只需實現規範中的一小部分即可達到目的。實際上，你只需檢查基於http或https的Web地址（當然，即使有所不同也可方便修改）。此外，URL字段通常會有http://這樣的字符串打頭，在檢查表單時必須考慮這種情形。
// 檢查input元素是否包含URL的通用函數
function checkURL( elem ) {
// 確保有文本的鍵入，而且不是默認的http://文本
return elem.value == '' || !elem.value == 'http://' ||
// 確保它是一個正確的URL
/^https?:////([a-z0-9-]+/.)+[a-z0-9]{2,4}.*$/.test( elem.value );
}
// 獲取需要檢查的inpu元素
var elem = document.getElementById("url");
// 檢查它是否是一個正確的URL
if ( ! checkURL( elem ) ) {
alert( "Field does not contain a URL." );
}
（3）電話號碼
電話號碼,取決於你的所在地，它們有着不同的情形。爲簡化起見，將使用中國式的電話號碼。當然，改變它們的規則以適應另一個國家或地區並不是十分困難只要改變相應的正則表達式就可以。
然後，還要試着處理電話號碼字段中的一些特別之處。電話號碼可以以不同的形式書寫，所以你需要允許這些形式的輸入（如0575-12345678或(0575)12345678或13336183980）。
這樣一來你不僅需要驗證數字本身，還要驗證這種特殊的格式。你可以簡單地逆向檢查電話號碼字段的值。
function checkPhone( elem ) {
// 檢查是否符合電話號碼的要求
return elem.value == '' || /(^[0-9]{3,4}/-[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^1[3|5|8]{1}[0-9]{9}$)/.test(elem.value);
// 0575-12345678或(0575)12345678或現有存在的手機號碼
}
// 獲取需要檢查的input元素
var elem = document.getElementById("phone");
// 檢查這個字段是否包含正確的電話號碼
if ( ! checkPhone( elem ) ) {
alert( "Field does not contain a phone number." );
}
（4）日期
最後要探索的是日期的驗證。再次，你會看到美國式的日期書寫格式（MM/DD/YYYY）。 就像電話號碼或者其他由國別決定的不同字段，如果有必要，你可以方便修改驗證的正則表達式以滿足本土化需求。使用如代碼清單8-7所示的具體驗證函數，你就可以驗證日期字段的內容了。
//檢查input元素是否包含日期的通用函數
function checkDate( elem ) {
// 確保輸入了內容並檢查是否符合MM/DD/YYYY的時間格式
return !elem.value || /^/d{2}///d{2}///d{2,4}$/.test(elem.value);
}
// 獲取需要檢查的inpu元素
var elem = document.getElementById("date");
// 檢查這個字段是否包含正確的日期
if ( ! checkDate( elem ) ) {
alert( "Field is not a date." );
}
5 錯誤提示方式
在完成了各種字段的正則表達式檢驗的函數之後，就要加入錯誤提示和用戶交互，其中最基本的錯誤提示方式是運用alert()方法彈出警告框，這種警告方式的有點在於編碼方便但是缺乏了用戶體驗，附件：表單驗證V1(基本版) 就是按照這種方式來實現的，如下圖所示：
部分代碼如下所示：
// 獲取需檢查的input元素
var elem = document.getElementById("name");
// 確保名字字段有文本輸入
if ( ! checkRequired( elem ) ) {
// 否則顯示錯誤並阻止表單提交
alert( "Required field is empty – please provide your name." );
return false;
}
以上提示方式已經在正式場合很少出現了，只在測試時使用。
6 用戶體驗提升
在完成了上述版本之後，我發現會有某些問題影響到用戶體驗。
1、用戶很厭煩表單輸入錯誤點擊提交後會彈出警告框很不友好；
2、修正了一個錯誤後又會依次檢驗下一個錯誤如果錯誤很多的話就要提交很多次另人生厭；
由於以上不足，應該在錯誤提示方式上做一定的修改，修改後的版本爲附件：表單驗證V2(提高版)。
該版本的特點是在表單html和css上做了一定修改，在文本框邊上加入了顯示錯誤的字段（默認情況下是隱藏的，當出現錯誤是纔會被顯示）。如下圖所示：
然後我們在Javascript中加入錯誤時觸發顯示錯誤字段的DOM操作。如下圖：
這樣的結果就是，當點擊提交是所有存在的錯誤會顯示在原有頁面上而不是以警告框的方式顯示，如下圖所示：
這樣用戶就可以同時知道他存在的所有錯誤逐一修改後再提交，避免了重複提交的尷尬。
7 體驗完美提升
通過了版本二的改進後，用戶體驗大大提升但還是沒有達到挑剔用戶滿意的階段。還存在以下問題：
1、用戶並不知道他能輸入什麼格式的日期、電話等；
2、用戶必須點擊提交按鈕才能知道錯誤在哪裏，有時候會另用戶感到不悅。
對於第一個問題我們可以在表單上做相應的註釋或者填寫一些默認信息來指明格式。如圖：
對於第二個問題。我們需要一種即時的錯誤檢驗和反饋。應該在每當用戶填寫完相應字段後進行檢驗，有人會使用onkeypress這個消息映射，但是這個並不科學，因爲用戶每敲擊一次鍵盤檢驗，用戶輸入第一個字符是往往是錯誤的，會造成用戶還沒有輸入完之前都是錯誤的情況，這是用戶不想看到的。所以應該使用onchange這個消息映射，他是在改變表單空間聚焦時發生檢驗，如用戶填完用戶名後點擊下一個字段就會對用戶名進行檢驗，具體見附件：表單驗證V3(完美版)
實現這個效果必須爲各個表單元素指定onchange映射，寫法有很多，這裏我使用了分離式腳本技術，這樣的優點是使html和javascript代碼分離，便於管理，具體如下：
這樣就能實現在用戶填寫表單的同時檢驗正確性，用戶會非常樂意填寫這樣的表單。
8 總結
首先，作爲實訓的開發經理，本次讀書報告主要是爲了對實訓中大量表單驗證做準備，並且爲團隊中其他同學做一個javascript方面的培訓。所以我分成三個版本來進行闡述是希望隊友能夠看懂並真正掌握這個在實訓中要反覆使用的技術。
同時，經過了這次重新編寫表單驗證，我把我原來的javascript編碼風格改成了分離式腳本編寫，這樣更適合企業化開發和管理，是對我自己的一個提升。
代碼地址:表單驗證demo.rar
