使用 jQuery 進行前端驗證
前段驗證指令碼的教程，其基礎為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 ：”輸入的型別不是日期時提示的訊息“
前端和後端的輸入合法性驗證
前端輸入合法性的驗證：
前端頁面：
<div class = "col-12">
<div class="kx-form-group">
<lable class="col-6 kx-control-lable"><i class="red-cue">*</i>sim卡號<lable>
<input type="text class="col-12 form-text" ng-model="xxx" name="simCardNo" ng-blur="checkSimCardNo()"/>
<span id="checkSimCard" style="display:none">請輸入字母或數字</span>
</div>
</div>
前端js：
var reg = /^[0-9a-zA-Z]*$/;
var csc=document.getElementById("checkSimCard");
$scope.checkSimCardNo = function(){
if(!reg.test($scope.myPosDeviceVo.simCardNo)){
csc.style.display="block";
$scope.myPosDeviceVo.simCardNo=undefined;
}
}
後端輸入合法性的驗證：
後端合法性驗證需要改動三個地方：1.Vo類或者Model類需要加註解；2.資料庫要自定義提示資訊；3.前端頁面需要在form中加validator=""和data-invalid-msg=""等必要資訊。
1.在Vo類或者Model類中加註解
在我們需要驗證的地方加註解例如@Require，@Length
例子：public class Xxj，裡面包含屬性如下
@Require(groups = {Save.class,Update.class})//require表示必填，也有其他註解如@Length和@Max分別表示字串長度和能夠表示的最大值
private String DeviceNo;
然後定義介面，例如：
public static interface Save{}
public static interface Update{}
這裡的兩個介面與上面的Save.class還有Update.class對應，用來區分在什麼時候會用到這個欄位的自定義提示，是在儲存的時候，還是在更新的時候，名稱可以自己定義。
在寫完註解和介面之後如果我們啟動tomcat會發現生成了兩對js檔案，每一對分別命名為Xxj_Save和Xxj_Update(這就是那兩個介面的作用了)，分別放在不同的目錄下，一個是校驗規則js一個是校驗提示js。根據這兩個js來發送提示資訊。
注意：在business目錄下的source/main/resource/properties目錄下有一個application.properties檔案，可以在裡面配置那兩個js的生成路徑;application.properties檔案裡面也需要配置你的Vo類或者model類的路徑。
2.資料庫自定義提示資訊
對應的資料庫需要插入一些提示資料
key locale_id message latest_time
Require.xxj.deviceNo 1 裝置號不能為空 ***
Require.xxj.deviceNo 2 DeviceNo Not Null ***
key列中的Require就是註解的欄位，message為提示資訊
在資料庫中設定key列中的值時，注意大小寫，因為在生成js的時候會預設的第一個單詞是小寫的。
3.在前端頁面中寫程式碼
<form g-validator="Xxj_Save" data-invalid-msg="tooltipMessenger">
對應input裡面應該有個屬性name=“deviceNo”
然後執行，看效果。
---------------------