JSP的前臺驗證方式

1.普通的JS驗證

1) 使用方法：

在JSP頁面或者JS文件裏，編寫js代碼，進行判斷。好比

2) 錯誤信息顯示：

1 function validateBeforeAdd***(){
2      var name=document.getElementById('username').value.trim();
3      if(name == ""){
4          alert("請填寫用戶名.");
5          document.getElementById('某個div的id').innerHTML=****;
6      }
7 }

通常都是使用alert()來顯示，或者在一個div中顯示。如上面的代碼所示。

3) 優缺點：優勢是不通過後臺，徹底是前臺進行判斷，速度比較快。缺點是代碼量比較大，要寫不少的if語句。

2. Struts2提供的驗證功能

1) 使用方法：

編寫對應的actionName-validation.xml文件，並在對應的<action />中增長<result name="input">***</result>。其中，actionName是須要驗證的Action的名字，而這個xml要和Action類放在同一個文件夾下。如下是AdminAction-validation.xml代碼片斷：

 1 <validators>
 2     <field name="username">
 3         <field-validator type="requiredstring">
 4             <param name="trim">true</param>
 5             <message>請輸入用戶名</message>
 6         </field-validator>
 7         <field-validator type="stringlength">
 8             <param name="maxLength">10</param>
 9             <message>用戶名不能超過10個字符</message>
10         </field-validator>
11     </field>
12  </validators>

 在對應的<action />中增長名爲input的結果：

1 <action name="login" class="com.action.AdminAction" method="login">
2         <result>main.jsp</result>
3         <result name="error">login.jsp</result>
4         <result name="input">login.jsp</result>
5  </action>

    若是是這樣來配置的話，AdminAction中全部的方法都會首先進行一樣的驗證，判斷username是否已經填寫，是否超過10個字符。若是AdminAction中的foo()不該該進行驗證，能夠在foo()方法前面，用@SkipValidation來跳過驗證。若是這個Action中，各個方法要進行不一樣驗證的話，能夠爲每一個方法配置一個驗證用的xml, 它的命名規則是actionName-functionName-validation.xml。

2) 錯誤信息顯示：

在input指向的物理視圖裏，要有至少一個<s:fielderror />來顯示錯誤信息。可是默認的<s:fielderror/>顯示格式是<ui></ui>的，每條錯誤信息不但會換行，並且前面還有一個噁心的大黑點兒。這是能夠改變的，可是不屬於本文範圍。

3) 優缺點：Struts2提供的前臺驗證功能，不須要編寫大量代碼，可是須要配置驗證規則。要特別注意短路驗證以及驗證的順序問題。Struts2的前臺驗證的錯誤信息返回到頁面時，須要刷新一下頁面。這牽扯到數據回顯問題。用Struts2自帶的標籤庫的話，給用戶的感受會更好一些，假如不使用Struts2的標籤，我都懷疑它不能回顯已經填好的數據。

3. JavaScript庫，JavaScript UI框架

1) 使用方法：使用ExtJS等框架。ExtJS的各類表單組件，功能很強大，自身就有非空驗證，長度驗證，正則表達式驗證。其代碼以下：

{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank:false,
        blankText:'First name is required.',
        maxLength:10,
        minLength:2
}

固然，這種JS庫提供了很是方便的Ajax提交方式，可是前臺驗證最好仍是不要跑到後臺的範圍裏去。

2) 錯誤信息顯示：ExtJS提供了很是好的錯誤信息顯示方式，以下圖所示：

這種顯示不須要開發人員編寫額外的代碼。

3) 優缺點：ExtJS的確是很強大的js框架，使用它，前臺驗證變得很方便，錯誤信息的顯示也很好看。可是，ExtJS的速度彷佛有點慢，可能和我用的js版本有關。我用的是debug版的，不是發佈版的。另外，我不喜歡ExtJS的書寫格式，和HTML或者XML語言差異太大，徹底是JSON格式的。由於功能很強大，因此對它進行擴展或者修改，並不容易。以上對於ExtJS的正面以及反面的言論，徹底是本人的想法，請勿輕信。