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

時間 2019-11-11

原文原文鏈接

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

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

平常開發工做中，常常用到表單填寫時的錄入驗證，像什麼電話、郵箱之類的，或是不能爲空、限定錄入長度、數值大小等等。技術並不複雜，可是頻次挺高，網上也有不少相關代碼或是插件可用，甚至有些宣稱「一行代碼實現驗證」，我也以爲嫌麻煩。因而就動手寫了一個，剛開始只是本身用，要求不高。初版已是好久以前了，後來慢慢優化，從項目中獨立出來，做爲一個單獨的Javascript插件來使用。本身感受還不錯，拿出來給你們分享。

主要功能：

一、支持的驗證：
非空驗證、字符長度驗證、數值區間驗證、輸入是否相同、不等於某值、數據類型驗證（支持和與或運算符）、文件類型限制、首尾字符驗證、正則表達式驗證
二、其它功能：
分組驗證（分組能夠交叉驗證）、驗證方式（提交驗證或失去焦點驗證）、提示信息設置（可出如今上下左右）、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>

代碼說明：html

按鈕上添加verify="true"，即該按鈕支持驗證動做，會驗證form表單全部帶驗證屬性的控件，若是驗證不經過，則提示alt的消息框，並阻止form表單提交。git

使用說明：github

一、非空驗證正則表達式

<input name="" type="text" nullable="false"/>服務器

二、字符長度驗證異步

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

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

三、數值區間驗證ui

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

<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>

四、輸入是否相同

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

五、不等於某值

<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>

六、數據類型驗證

<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"，既是數字，且是郵編。

七、文件類型限制

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

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

八、首尾字符驗證

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

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

九、正則表達式驗證

<input name="" type="text" regex="\d+"/>（所有爲數字）

默認爲表達式增長^前綴和$後綴，也就是說，默認是要求全字匹配。

十、分組驗證

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

分組能夠交叉驗證，如

<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"/>

十一、驗證方式

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

在實際工做中，用戶但願錄入後即驗證，即控件失去焦點後當即進行驗證，沒必要統一提交時驗證。

能夠經過設置form表單的patter屬性爲focus（默認爲submit），即焦點模式。

十二、提示信息樣式設置

提示信息顯示在右側，<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標籤