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>

代碼說明：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="pw1" type="text"/>

<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的值一致，當點擊按鈕時，即實現驗證。

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

十一、驗證方式

默認的驗證方式是點擊按鈕後按順序逐個驗證所在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"/>

速查表