[jQuery]jQuery EasyUI做資料驗證

| Comments

大家應該很熟析jQuery了,jQuery已經很簡單了,jQurey EasyUI更簡單了,他是base在jQuery的Web UI 框架裡,你可以用很少很少的JS來做你想要的功能,沒辦法,我就是太懶了而且我也沒有一個很高強的前端網頁工程師,所以才會想要用很簡單的東西來做到我想要的效果(哈~~)

jQuery EasyUI官方網站:http://www.jeasyui.com/ jQuery EasyUI 下載:http://www.jeasyui.com/download/index.php
匯入js

 

 1: <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
 
 2: <script type="text/javascript" src="../jquery-1.6.min.js"/>
 
 3: <script type="text/javascript" src="../jquery.easyui.min.js"/>
 

HTML

 1: <input class="easyui-validatebox" type="text" required="true">
 

跟平常我們在做一個textbox其實只是多加了一個 required的參數,令這個textbox做驗証

image

required的參數預設是false的,你要讓他啟用的話是要帶入true,而jQuery EasyUI還有其他的可以使用的參數以下介紹給大家知道:

屬性 型別 描述 預設
required 布林值 這個欄位是不是必填 false
validType String 的類型(E-mail、Url) null
missingMessage String 欄位為空值,提示文字 This field is required
invalidMessage String 欄位驗證失敗,提示文字 Please Enter a valid XXX
在validType中我們也可以使用預定的驗證類型,當然也是可以自定,這邊就介紹如何使用,validType:
validType參數 描述
email Email驗證
url URL驗證
length[x,y] 字串數驗證,x為最小值,y為最大值
Name:<input class="easyui-validatebox" required="true" validType="length[1,3]">Email:<input class="easyui-validatebox" validType="email">URL:<input class="easyui-validatebox" required="true" validType="url">
 

官方Demo:http://www.jeasyui.com/tutorial/form/form3_demo.html