Js表單驗證控件（使用方便，無需編碼）-01使用說明

演示地址：http://weishakeji.net/Utility/Verify/Index.htm  

 開源地址：https://github.com/weishakeji/Verify_Js

 

日常開發工作中，經常用到表單填寫時的錄入驗證，像什么電話、郵箱之類的，或是不能為空、限定錄入長度、數值大小等等。技術並不復雜，但是頻次挺高，網上也有很多相關代碼或是插件可用，甚至有些宣稱“一行代碼實現驗證”，我也覺得嫌麻煩。於是就動手寫了一個，剛開始只是自己用，要求不高。第一版已經是很久之前了，后來慢慢優化，從項目中獨立出來，作為一個單獨的Javascript插件來使用。自己感覺還不錯，拿出來給大家分享。

主要功能：

1、支持的驗證：
非空驗證、字符長度驗證、數值區間驗證、輸入是否相同、不等於某值、數據類型驗證（支持和與或運算符）、文件類型限制、首尾字符驗證、正則表達式驗證 
2、其它功能：
分組驗證（分組可以交叉驗證）、驗證方式（提交驗證或失去焦點驗證）、提示信息設置（可出現在上下左右）、Ajax異步驗證 

 

 示例：

我的基本思路是通過設置控件的屬性來實現，無需編寫Js代碼，當然，如果需要Ajax驗證，例如驗證賬號是否已經注冊、密碼是否正確，需要異步調用服務器端代碼，那就得寫一些Js代碼了，不過也很簡單。

代碼示例（僅上圖中部分代碼）：

<form onsubmit="alert('驗證成功');return false;">
<p>姓名：<input name="" type="text" size="6" datatype="chinese" lenlimit="2-4" alt="限2至4個中文字/符"><span>（限中文）</span>
</p>
<p>  <input type="submit" name="button" class="button" value="驗證表單" verify="true"/>  </p>
</form>

代碼說明：

按鈕上添加verify="true"，即該按鈕支持驗證動作，會驗證form表單所有帶驗證屬性的控件，如果驗證不通過，則提示alt的消息框，並阻止form表單提交。

使用說明：

 1、非空驗證

<input name="" type="text" nullable="false"/>

2、字符長度驗證

<input name="" type="text" lenlimit="5"/>（最長5個字符）

<input name="" type="text" lenlimit="5-10"/>（最少5個字符，最多10個字符）

3、數值區間驗證

<input name="" type="text" numlimit="5"/>（數值不得大於5）

<input name="" type="text" numlimit="5-10"/>（數值介於5-10之間）

 指定某個錄入控件為設定值 

<p> 產品價格：
        <input name="prise" type="text" value="10" datatype="uint"/>
      元 </p>
      <p>最低優惠：
        <input name="min" type="text" value="12"
 	datatype="uint" numlimit="{prise}"/>(優惠價不可以超過產品價格)
      </p>
      <p> 最大優惠：
        <input name="max" type="text"
	 numlimit="{min}-{prise}"/>(最大優惠大於最低優惠，但不可以超過產品價格)
      </p>

 4、輸入是否相同

<input name="pw1" type="text"/>

<input name="pw2" type="text" sametarget="pw1"/>（與name="pw1"的控件錄入相同）

5、不等於某值

<select name="select" id="select" novalue="|1|2" alt="請選擇專科或以上學歷">
        <option value="">--請選擇--</option>
        <option value="5">碩士</option>
        <option value="4">本科</option>
        <option value="3">專科</option>
        <option value="2">中學</option>
        <option value="1">小學</option>
      </select>

6、數據類型驗證

<input name="tm" type="text" datatype="uint"/> 設置datatype="uint"，要求錄入正整數。

可以驗證的數據類型包括：chinese 中文、user 賬戶、uint 正整數、number 數字、float 浮點數、tel 電話、mobile 移動電話、zip 郵編、email 電子郵箱、idcard 身份證、qq 號、url 網址。

滿足任一條件（即或運算）：datatype="tel|mobile"，只要是電話（固話或手機號）都通過驗證

滿足全部條件（即和運算）：datatype="uint&zip"，既是數字，且是郵編。

7、文件類型限制

<input name="" type="file" fileallow="jpg|png"/>，只允許上傳jpg與png圖片

<input name="" type="file" filelimit="exe|com|bat|js"/>，禁止上傳可執行文件

8、首尾字符驗證

<input name="" type="text" begin="http|https"/>（必須是網址）

<input name="" type="text" end="@qq.com"/>（必須是qq郵箱）

9、正則表達式驗證

<input name="" type="text" regex="\d+"/>（全部為數字）

默認為表達式增加^前綴和$后綴，也就是說，默認是要求全字匹配。

10、分組驗證

如下，按鈕與錄入控件的group的值一致，當點擊按鈕時，即實現驗證。

<input type="text" datatype="email" nullable="false" group="a"/>

<input type="submit" name="button" class="button" value="驗證表單" verify="true" group="a" />

分組可以交叉驗證，如

<p>電話：
<input type="text" datatype="mobile|tel" nullable="false"  group="a|c">（同時屬於a組和c組）
</p>
<p>
郵箱：<input type="text" datatype="email" nullable="false" group="b|c" />(同時屬於b組和c組)
</p>
<input type="submit" name="button" class="button" value="驗證A組和B組" verify="true" group="a|b"/>
<input type="submit" name="button" class="button" value="驗證B組和C組" verify="true" group="b|c"/>

11、驗證方式

默認的驗證方式是點擊按鈕后按順序逐個驗證所在form表單內的所有控件，如果驗證全部通過則觸發form的submit事件，不通過則中斷。

在實際工作中，用戶希望錄入后即驗證，即控件失去焦點后立即進行驗證，不必統一提交時驗證。

可以通過設置form表單的patter屬性為focus（默認為submit），即焦點模式。

12、提示信息樣式設置 

提示信息顯示在右側，<input name="" type="text" nullable="false" place="right"/> 

設置提示信息的前景色（字體顏色）與背景色，<input type="text" datatype="email" nullable="false"bgcolor="#33f" fgcolor="#FF9"/>

 

速查表 

 

屬性	參數	默認值	說明
nullable	false或true	true	是否允許為空，默認是允許，即為true。當為false時，控件右側顯會顯示紅色星號。（如果設置star='false'則不顯示）
star	false或true	true	是否允許顯示紅色星號，為false時不顯示。
lenlimit	整數數值，如 lenlimit="5" lenlimit="5-10"		lenlimit="5"，錄入字符最長不得超過5個字符，包括5個 lenlimit="5-10"，錄入字符長度為5至10個字符，包括5與10
numlimit	整數數值，如 numlimit="5" numlimit="5-10" 目標控件名稱，如 numlimit="｛ctlname｝"		numlimit="5"，錄入數值最大不得超過5，包括5個 numlimit="5-10"，錄入5至10之間的數值，包括5與10 numlimit="｛ctlname｝"，錄入數值不超過控件名稱為ctlname的值
sametarget	要比較的控件的name值		最常見的應用場景就是密碼輸入，此處填寫要比較錄入值的控件的name
novalue	任意值， 支持多個值 用|分隔		要求控件的值不得等於某些值，如novalue="1|2"，即不得等於1和2。
datatype	chinese 中文 user 賬戶 uint 正整數 number 數字 float 浮點數 tel 電話 mobile 移動電話 zip 郵編 email 電子郵箱 idcard 身份證 qq 號 url 網址		驗證錄入的數據是否符合要求的數據類型。 滿足任一條件：datatype="tel|mobile"，只要是電話（固話或手機號）都通過驗證 滿足全部條件：datatype="uint&zip"，既是數字，且是郵編。
fileallow	文件擴展名 多個名稱用|分隔		允許上傳的文件類型。最常見的應用場景是文件上傳
filelimit	文件擴展名 多個名稱用|分隔		禁止上傳的文件類型。最常見的應用場景是文件上傳
begin	任意字符 多個值用|分隔		限定必須以某值開頭，常見的應用場景，如錄入網址，可以http://開頭或https://開頭。如begin="http|https"
end	任意字符 多個值用|分隔		限定必須以某值結尾，end="@qq.com|@163.com"，必須是qq郵箱或163郵箱
group	任意字符 多個值用|分隔 all驗證所有		分組驗證。控件與按鈕設置一樣的值，當點擊按鈕時即驗證相關控件，多個組可以用|線分隔。 支持組的交叉驗證。 如果按鈕上設置group="all"，則驗證form中所有控件
patter	sumbit或focus	sumbit	控件驗證方式，sumbit是提交時驗證。fcocus是失去焦點時驗證，（更加即時） 該屬性可以設置在控件上，也可以設置在form標簽
place	top、bottom、left、right	bottom	提示信息顯示的位置，默認是在下方，當設置為right時在右側。 該屬性可以設置在控件上，也可以設置在form標簽
bgcolor	顏色值	紅色	提示信息的背景色。 該屬性可以設置在控件上，也可以設置在form標簽
fgcolor	顏色值	白色	提示信息的前景色，即字體顏色。 該屬性可以設置在控件上，也可以設置在form標簽

 

演示地址：http://weishakeji.net/Utility/Verify/Index.htm  

 開源地址：https://github.com/weishakeji/Verify_Js