validation客戶端驗證框架使用手冊

Liuriven發表於2020-12-12
客戶端框架

一. JSValidation是什麼？

JSValidation是客戶端表單驗證框架，用在BS系統中，或者簡單的網頁系統中。表單驗證在這些開發中很常見：新使用者註冊，需要校驗某些欄位；使用者登陸，需要校驗；等等。在這之前，頁面開發者（JavaScript開發者）需要編寫大量的JavaScript來與表單物件互動，並進行校驗。常見的校驗如不能為空，必須滿足長度要求，必須為數字，必須為Email等等。根據一般的經驗，如果表單中需要校驗的域個數超過10個，開發過程就顯得枯燥無味——多段重複的程式碼不斷重複，如果要求跨瀏覽器，更多的考慮因素使人頭疼不已。往往這個頁面的驗證還不能用於那個驗證……雖然邏輯基本相同；但是在大多數情況下，出於種種原因，開發者寧願（或者沒辦法）重新編寫另一個頁面的JavaScript程式碼。

JSValidation致力於改善這一過程。它將常見的校驗（目前支援13種）封裝起來，並創造性的採用xml來存貯表單驗證資訊，使得表單的驗證成為整個專案中最不重要的環節，開發者只需要定義幾個xml標記，就可以建立出複雜的驗證策略，而不用編寫一行JavaScript程式碼。由於採用xml集中管理表單驗證，使得表單驗證在整個系統中的耦合度大大降低，並且易維護性大大提高。開發者更多的精力可以投入到業務相關的程式碼中。

恰恰相反，JSValidation內部結構雖然不太簡單（對使用者而言），但是呼叫方式卻極其簡單，配置好環境後，只需要在需要驗證的表單的HTML標記中加上οnsubmit="return doValidate(‘formId’)"即可。這並沒有改變開發者的習慣。

更為明顯的優勢是，JSValidation具備跨瀏覽器的能力。在目前的測試環境下，支援IE5及以上版本，Mozilla系列和支援DOM2模型的其他瀏覽器。你不用再考慮在多瀏覽器下如何相容，JSValidation幫你做到了這些。

二. JSValidation能做什麼，不能做什麼？

2.1.1. JSValidation能夠校驗表單

在系統複雜，表單複雜的場景下，JSValidation的優勢更加突出。JSValidation目前能夠完成客戶端的13種驗證如下：
取值非空
必須為整數
必須為雙精度數
必須為普通英文字元（字母，數字，下劃線）
必須為中文字元
最小長度
最大長度
是否為Email格式
是否為日期格式（yyyy-mm-dd）
自定義的正規表示式
整數範圍（大於某數小於某數）
雙精度數範圍
必須與某個域的值相同

所有這些驗證都在客戶端完成。如果還有在此之外的驗證需求，請告訴我們，我們會跟據需求程度開發出新的驗證模型。

2.1.2. JSValidation不能做的：

跨頁面的驗證。例如，A頁面輸入值，必須滿足B頁面中某一個值的條件，或者更多的頁面。這個需求需要使用者的反饋。如果在現實開發中這種需求很普遍，我們會考慮開發。目前的替代方式是，將A頁面需要驗證的值POST到B頁面的一個Hidden Field，然後再使用已有的驗證方式。

與伺服器互動驗證。最常見的是輸入使用者名稱密碼後登入。限於它的表示範圍，JSValidation不能完成這個工作。

三. 什麼情況下，我應該使用JSValidation？

如果沒有現成的驗證參考，就使用它吧。

有很多的開發工具、開發框架（模型）都已經提供了驗證支援，如ASP.NET，Struts。但是還有更多的Framework沒有提供支援，例如我們使用的Velocity（也許它不能稱為框架），以及其他的ASP, PHP, Pure JSP, CGI等等。也許沒有成熟的框架使用。如果沒有，JSValidation也許能夠幫助你減輕客戶端校驗程式設計的壓力，讓你有更多的精力投入對業務的關注中。

另外，如果你的系統很小，或者系統中需要校驗的很少——例如只有一個登陸的使用者名稱、密碼需要校驗，那麼基於效能考慮，我們不建議你採用JSValidation。JSValidation庫檔案達到22KB，加上驗證檔案，也許要在你的頁面上載入額外的26K+才能執行。而相同的功能，自己按照常規方式寫也不過幾行。

當然，如果你現有的開發過程中已經有了自己的模型，很熟悉也很牢固了，儘可能採用你自己的方式吧

四. 在專案中快速使用jsvalidation

4.1.1. 獲取jsvavlidation

官方下載：https://www.validation-online.net/

4.1.2. dation配置環境

首先將validation-framework.js和validation-config.xml複製到專案的某一目錄下

例如：

  1.     開啟validation-framework.js，找到var ValidationRoot = ""; 將這行程式碼更改為var ValidationRoot = "js/"; (就是validation-config.xml檔案的位置)。

  2.     在你需要進行校驗的頁面中，加入jsvalidation的引用：

  1.     在該頁面需要驗證的表單Form標記中，加入on submit="return doValidate('formId')"。其中formID是該Form的id。

  2.     完成。

4.1.3. 編寫validation-config.xml

validation-config.xml是集中管理表單的存放點，也是JSValidation處理驗證條件的地方。

  1.    - 檔案格式

    validation-config.xml是標準文字格式。你可以以任何文字編輯器來編輯它。在正式校驗之前，請確保你的xml檔案能夠正常顯示在瀏覽器中。

  2.    - 基本結構


<validation-config>              每個validation-config.xml都有一個validation-config根節點
    <form ...>                         可以進行一個或者多個form的校驗
        <field ...>                     每個form有一個或者多個需要驗證的表單域
             <depend ... />        每個域需要驗證的條件可以有一個或者多個

  1.    節點說明

validation-config: 根節點

屬性：lang: 所用的語言，可以是"auto", “zh-cn”（簡體中文）或者"en-us"（英文）。預設為auto，可選。
子節點：form, 一個或多個

form: 虛擬表單，通過id對映網頁中的表單
屬性：id: 對映網頁表單中的id，通過這個id，使得jsvalidation與實際網頁表單相關聯。必須
show-error: 顯示錯誤提示資訊的方式。可以是alert（將會顯示對話方塊）或者一個div的id（將會在這個div中顯示錯誤訊息）必須
onfail: 當校驗失敗時，執行的自定義JS函式。可選（該版本尚未實現）
子節點：field，一個或者多個

field: 虛擬表單域，通過name對映表單中的實際域
屬性：name: 表單中的域的名稱，例如input name=“abc”，此處則對應abc。 必須
display-name: 表單的顯示名稱。當校驗失敗時，會顯示這個屬性。必須
onfaile: 與form中的onfail一樣。尚未實現。可選
子節點：depend，一個或多個

depend: 校驗條件
屬性：name: 校驗條件的名稱，必須為下面指定的13中名稱之一，大小寫敏感。必須。
param0-param4，5個引數，根據name不同，各有不同取值。

一個範例：

<!--校驗使用者註冊--> 

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE validation-config SYSTEM "validation-config.dtd">

<validation-config lang="auto">

    <form show-error="errorDiv" id="registerForm" show-type="first">

        <field display-name="使用者名稱" name="username">

            <depend name="required"/>

            <depend name="commonChar"/>

            <depend name="minLength" param0="6"/>

            <depend name="maxLength" param0="8"/>

        </field>

        <field display-name="密碼" name="password">

            <depend name="required"/>

            <depend name="commonChar"/>

            <depend name="minLength" param0="6"/>

            <depend name="maxLength" param0="8"/>

        </field>

        <field display-name="重複密碼" name="repassword">

            <depend name="required"/>

            <depend name="commonChar"/>

            <depend name="minLength" param0="6"/>

            <depend name="maxLength" param0="8"/>

            <depend name="equalsField" param0="password"/>

        </field>

        <field display-name="年齡" name="age">

            <depend name="required"/>

            <depend name="integerRange" param0="18" param1="60"/>

        </field>

        <field display-name="年出生年月" name="birthday">

            <depend name="required"/>

            <depend name="date" param0="yyyy-mm-dd"/>

        </field>

        <field display-name="電子郵件" name="emails">

            <depend name="required"/>

            <depend name="email"/>

        </field>

    </form>

</validation-config>

4.1.4. 校驗表單

編寫完validation-config.xml後，就可以按照上面的部署方法進行部署。

五. JSValidation支援的13種驗證

在這裡插入圖片描述

六. 完整的例子（實現使用者註冊驗證）

6.1.1. 專案目錄

結合以上目錄注意修改檔案中21行路徑

在jsp頁面中引入檔案

6.1.2. 註冊頁面內容

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>使用者註冊</title>

<script type="text/javascript" src="js/validation-framework.js"></script>

</head>

<body>

    <div id="errorDiv"></div>

    <form action="http://www.google.cn" method="post" id="registerForm" onsubmit="return doValidate('registerForm')">

        <table align="center" style="border: 1px solid; border-collapse: collapse;" width="300" height="300" border="1" bordercolor="blue">

            <caption>使用者註冊</caption>

            <tr>

                <td align="right">使用者名稱:</td>

                <td><input id="username" type="text"/></td>

            </tr>

            <tr>

                <td align="right">密碼:</td>

                <td><input id="password" type="password"/></td>

            </tr>

            <tr>

                <td align="right">重複密碼:</td>

                <td><input id="repassword" type="password"/></td>

            </tr>

            <tr>

                <td align="right">年齡:</td>

                <td><input id="age" type="text"/></td>

            </tr>

            <tr>

                <td align="right">出生年月:</td>

                <td><input id="birthday" type="text"/></td>

            </tr>

            <tr>

                <td align="right">email:</td>

                <td><input id="emails" type="text"/></td>

            </tr>

            <tr>

                <td></td>

                <td>

                    <input type="submit" value="註冊"/>

                    <input type="reset" value="取消"/>

                </td>

            </tr>

        </table>

    </form>

</body>

</html>

6.1.3. 配置validation-config.xml檔案

（針對上述使用者登錄檔單資訊validation-config.xml檔案配置資訊如下）

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE validation-config SYSTEM "validation-config.dtd">

<validation-config lang="auto">

    <form show-error="alert" id="registerForm" show-type="all">

        <field display-name="使用者名稱" name="username">

            <depend name="required"/>

            <depend name="commonChar"/>

            <depend name="minLength" param0="6"/>

            <depend name="maxLength" param0="8"/>

        </field>

        <field display-name="密碼" name="password">

            <depend name="required"/>

            <depend name="commonChar"/>

            <depend name="minLength" param0="6"/>

            <depend name="maxLength" param0="8"/>

        </field>

        <field display-name="重複密碼" name="repassword">

            <depend name="required"/>

            <depend name="commonChar"/>

            <depend name="minLength" param0="6"/>

            <depend name="maxLength" param0="8"/>

            <depend name="equalsField" param0="password"/>

        </field>

        <field display-name="年齡" name="age">

            <depend name="required"/>

            <depend name="integerRange" param0="18" param1="60"/>

        </field>

        <field display-name="年出生年月" name="birthday">

            <depend name="required"/>

            <depend name="date" param0="yyyy-mm-dd"/>

        </field>

        <field display-name="電子郵件" name="emails">

            <depend name="required"/>

            <depend name="email"/>

        </field>

    </form>

</validation-config>

對於裡面具體的配置資訊我不在闡述，如有不懂的大家可以查詢jsvalidation的文件，這裡提醒大家在專案中長疏忽的地方及應注意的事項

       i.              整個專案檔案的編碼問題：

最好統一編碼為utf-8，這裡需要注意的是檔案預設的編碼格式是gbk建議大家統一更換為utf-8否則裡面的中文字元亂碼達不到預期的效果，我在初次使用的時候就疏忽了這個地方，結果浪費了好多時間

     ii.              注意路徑問題，這裡告訴大家一個快捷方法：在jsp中引用檔案時，選中該檔案然後拖到頁面中鬆開滑鼠，大家會發現奇蹟出現了，這個檔案已經被引用進來了，而且保證不會出錯

這塊應注意兩處的路徑問題：

(a)jsp頁面中引用檔案的路徑

(b) 檔案中的路徑問題：

其中var ValidationRoot的值可直接拷貝在jsp中引用檔案路徑的前半部分

如：


<script type="text/javascript" src="js/validation-framework.js"></script>

即你只需拷貝“js/”部分去填充var ValidationRoot的值

    iii.              驗證email型別表單屬性：

在驗證email型別表單屬性時，你必須同時指定

否則在驗證email時將不起作用

   iv.              validation-config.xml檔案中<form> 標籤屬性配置

  1.   show-error

show-error屬性用來確定以何種方式展現錯誤資訊,其取值有alert/errorDiv, alert就不用解釋了, errorDiv就是以div的形式提示錯誤資訊,這就需要你在jsp頁面中定義一個div其id應為errorDiv,

如：

,最終錯誤資訊將會顯示在該div中 

  1.   id

id對應jsp頁面中form的id屬性

  1.   show-type

show-type屬性用來確定錯誤資訊顯示的條目,其取值為all/first

all一次性顯示所有的錯誤資訊（從第一個不合法的表單屬性一次性校驗）

first每次只顯示一條（從第一個不合法的表單屬性逐個校驗）

  1.   jsvalidation類說明圖

相關文章