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

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

速查表