如今很多的網站偶會有不同層次的驗證去驗證用戶輸入的信息是否符合我們所需要的數據類型。並且可以說任何有輸入的地方都需要的去驗證，驗證一方面是要求用戶輸入正確格式的數據，同時也是避免惡意的用戶進行非法的輸入從而攻擊網站。其中危害比較大的自然就是跨站腳本。而最近正好有一個大項目需要，所以就寫了一篇關於前段驗證腳本的教程，其基礎為jQuery的插件validate。
一、可以驗證哪些信息
- 要求輸入不能為空
- 要求輸入格式必須為電子郵箱
- 要求輸入格式必須為URL
- 要求輸入格式必須為日期
- 要求輸入格式必須為數字
- 要求輸入格式必須為整數
- 要求輸入必須和指定輸入框內容相同
- 要求輸入必須大於指定字符長度
- 要求輸入必須小於指定字符長度
- 要求輸入必須在指定字符長度范圍內
- 要求輸入數字必須大於指定數值
- 要求輸入數字必須小於指定數值
- 要求輸入數字必須在指定數值范圍內
- 要求必須選擇項
- 要求必須選擇不少於指定項
- 要求必須選擇不大於指定項
- 要求必須選擇在指定范圍內的項數量
雖然默認已經自帶了許多日常中所需要的驗證，但是客戶的需求是不斷改變的。但是這個插件已經想到了以后的功能擴展，通過指定的方法可以將設計者自定義的驗證功能嵌入進validate插件中，並且不會破壞原有的驗證功能。但日常很多地方上面提供的驗證功能已經可以解決了很多了。所以我們下面將會以上面這些提供的驗證逐一介紹如何使用。
因為特殊的需求，所以我個人改變了錯誤信息呈現的方式，不是以label的方式呈現，而是更加友好更加動態的方式呈現錯誤提示信息。但由於需要技術保留，所以不能提供下載。但是所有的功能都可以實現的。
二、快速學習
驗證基本上都是驗證表單中的輸入內容，所以首先需要指定驗證的表單:
1 <body> 2 <form name="form1"> 3 <table> 4 <tr> 5 <td><label for="us">UserName:<input type="text" name="us" id="us" /></label></td> 6 </tr> 7 <tr> 8 <td><label for="pwd">PassWord:<input type="password" name="pwd" name="pwd" /></label></td> 9 </tr> 10 </table> 11 </form> 12 <script type="text/javascript"> 13 $(function(){ 14 $("#form1").validate(); 15 }); 16 </script> 17 </body>
其中的“ $("#form1").validate(); ” 是最重要的，如果需要驗證必須使用該代碼，否則無法實現驗證。如果指定的表單不同驗證時只驗證指定表單。
三、漫漫學習
- 實現輸入內容不能為空
<input type="text" name="in" nValidate="{required:true}" />
其中最重要的是 nValidate="{required:true}" 並且以后需要添加任何驗證功能都要在 nValidate 中進行修改.
- 實現輸入內容必須為電子郵箱
<input type="text" name="ceemail" nValidate="{email:true}" />
看到其中的 email:true 相信很多人都應該可以猜出后面如何使用不同的驗證了。
- 實現輸入內容必須為電子郵箱，且不能為空
<input type="text" name="ceemail" nValidate="{required:true,email:true}" />
這里我們使用了組合的方式將電子郵箱的驗證功能和輸入內容不能為空的驗證功能同時啟用，那么就可以實現必須輸入內容並且輸入的內容必須符合電子郵箱的格式。
- 實現輸入內容必須為URL
nValidate="{url:true}"為了更快速的學習，下面將會列出參數名稱以及冒號后面所需要填寫的參數和類型
- 實現輸入內容必須為日期
date:true - 實現輸入內容必須為數字
number:true - 實現輸入內容必須為整數
digits:true - 實現輸入內容必須和指定輸入框內容相同
equalTo:'#id'
參數說明:
id : 指定內容相同的輸入框id - 實現輸入內容必須大於指定字符長度
minlength:size
參數說明:
size : 指定字符串的長度 - 實現輸入內容必須小於指定字符長度
maxlength:size
參數說明:
size : 指定字符串的長度 - 實現輸入內容必須在指定字符長度范圍內
rangelength:[minsize,maxsize]
參數說明:
minsize : 最短字符長度
maxsize : 最長字符長度 - 實現輸入數值必須大於指定數值
min : num
參數說明:
num : 最小數值（輸入的數值可以等於這個數值） - 實現輸入數值必須小於指定數值
max : num
參數說明:
num : 最大數值（輸入的數值可以等於這個數值） - 實現輸入數值必須在指定數值范圍內
range : [minnum,maxnum]
參數說明:
minnum : 最小數值
maxnum : 最大數值
四、自定義提示消息
上面的學習僅僅是學習了如何使用該驗證，但是對於用戶而言，他並不知道哪里錯了，為什么錯的。所以我們經常需要提示用戶輸入的內容具有什么錯誤。雖然我已經內置了中文的提示信息，但是那只是比較死板的，真實的情況中，我們必須根據該輸入框要求輸入的內容更加友好的提示用戶的輸入到低具有什么錯誤，如何糾正。所以下面我們即將學習如何自定義提示的消息內容。
通用屬性 -- messages
如果是設置不同輸入錯誤的提示信息，必須在"messages"下進行增加修改，如下:
1 <input type="text" name="test2" nValidate="{required:true,messages:{required:'用戶名不能為空'}}"
對於上面的輸入框，如果用戶沒有輸入用戶名則會提示用戶“用戶名不能為空”，而默認的是“字段不能為空”，一看就可以感覺到友好度更高了。
並且可以設置不同錯誤類型所提示的消息,如下:
<input type="text" name="test1" nValidate="{required:true,number:true,minlength:5,maxlength:120,messages:{required:'請輸入年齡',number:'請輸入數字',minlength:'年齡不可以小於{0}歲',maxlength:'年齡不可以大於{0}歲'}}" />
以上的代碼將可以實現要求用戶輸入正確年齡的操作，並且不能為空，且輸入的年齡范圍必須在5~120歲之間，否則將會顯示對應的錯誤，比如用戶不輸入內容則提示“請輸入年齡”，輸入的內容為非數值類型則提示：“請輸入數字”，輸入的數值小於5則提示：“年齡不可以小於5歲”，輸入的數值大於120歲則提示：“年齡不可以大於120歲”，其中的”{0}“，后台jQuery將會用我們設置”minlength“和”maxlength“中的數值替換掉。這樣就可以自定義消息了。：“請輸入數字”，
下面將陳列可以自定義消息的輸入驗證，因為很多都已經封裝，所以前台就這么簡單了。
required : “輸入為空時提示的消息”
number ：”輸入類型非數值類型時提示的消息“
minlength ：”輸入內容的字符創長度小於參數設置的值時提示的消息“ 存在參數 {0} 為 minlength 設置的值
maxlength : ”輸入內容的字符長度大於參數設置的值時提示的消息“ 存在參數 {0} 為 maxlength 設置的值
rangelength : ”輸入內容的字符長度不在指定范圍長時提示的消息“ 存在參數 {0} 為最短長度 {1} 為最長長度
min : ”輸入的數值小於參數設置的值時提示的消息“ 存在參數{0} 為 min 設置的值
max ：”輸入的數值大於參數設置的值時提示的消息“ 存在參數{0} 為 max 設置的值
range ： ”輸入的數值不在指定范圍時提示的消息“ 存在參數{0} 為最小數值的值 {1} 為最大數值的值
email : ”輸入內容不符合郵箱地址時提示的消息“
url : "輸入的內容不符合URL地址時提示的消息"
digits ：”輸入的類型不是整數時提示的消息“
date ：”輸入的類型不是日期時提示的消息“