jQuery表單驗證插件jQueryValidationEngine使用

 jQuery 表單驗證插件 jQuery Validation Engine 使用方式如下：

1.引入頭文件（注意一定要把jQuery放在前面），指定使用 jQuery Validation Engine 的<form>的ID：

01	<scriptsrc="lib/jquery-1.8.3.min.js"></script>

02

03	<!-- validationEngine -->

04	<linkrel="stylesheet"href="css/validationEngine.jquery.css"type="text/css"/>

05	<scriptsrc="lib/jquery.validationEngine-zh_CN.js"type="text/javascript"charset="utf-8">

06

</script>

07	<scriptsrc="lib/jquery.validationEngine.js"type="text/javascript"charset="utf-8">

08

</script>

09

<script>

10	$(document).ready(function(){

11	// binds form submission and fields to the validation engine

12	$("#formular").validationEngine('attach');

13

});

14

</script>

2.在需要使用 jQuery Validation Engine 的<form>代碼如下所示：

01	<formaction="UserAdd.action"method="post"id="formular">

02	<tableclass="tablesorter">

03

<tbody>

04	<tr><td><s:propertyvalue="%{getText('user.name')}"/>：</td><td><inputvalue="" name="name"type="text"/></td></tr>

05	<tr><td><s:propertyvalue="%{getText('user.loginname')}"/>：</td><td><inputvalue=""class="validate[required,minSize[4]] text-input validate[optional,maxSize[20]] text-input"name="loginname"type="text"/></td></tr>

06	<tr><td><s:propertyvalue="%{getText('user.password')}"/>：</td><td><inputvalue=""class="validate[required] text-input"name="password"type="password"id="password"/></td></tr>

07	<tr><td><s:propertyvalue="%{getText('user.repassword')}"/>：</td><td><inputvalue=""class="validate[required,equals[password]] text-input"name="repassword"type="password"/></td></tr>

08	<tr><td><s:propertyvalue="%{getText('user.email')}"/>：</td><td><inputclass="validate[required,custom[email]] text-input"value=""name="email"type="text"/></td></tr>

09	<tr><td><s:propertyvalue="%{getText('user.sex')}"/>：</td><td><inputid="sex_man"type="radio"name="sex"value="1"/><s:property value="%{getText('user.sex.man')}"/>

10	<inputid="sex_woman"type="radio"name="sex"value="0"/><s:propertyvalue="%{getText('user.sex.woman')}"/> </td></tr>

11	<tr><td><s:propertyvalue="%{getText('user.birthday')}"/>：</td><td><inputclass="validate[required,custom[date]] text-input"value=""name="birthday"id="birthday"type="text"/></td></tr>

12	<tr><td><s:propertyvalue="%{getText('user.telephone')}"/>：</td><td><inputclass="validate[custom[phone]] text-input"value=""name="telephone"type="text"/></td></tr>

13	<tr><td><s:propertyvalue="%{getText('user.userrolename')}"/>：</td><td><selectname="userroleid"id="userroleid"class="input_select2">

14	<c:forEachitems="${alluserrole}"var="userrole">

15	<optionvalue="${userrole.id}"}>${userrole.name}</option>

16	</c:forEach>

17	</select></td></tr>

18

</tbody>

19

</table>

20	<div><s:propertyvalue="%{getText('global.remark')}"/>：<br/>

21	<textareaclass="text_area2"cols="32"rows="3"name="remark"><s:propertyvalue="%{getText('user.value')}"/><s:propertyvalue="%{getText('global.remark')}"/></textarea></div><divstyle="height:10px"></div>

22

<div>

23	<inputclass="submit2"name="Submit"type="submit"value="提交"/>

24

25	<inputclass="submit2"name="Submit2"type="reset"value="重置"/>

26

</div>

27

</form>

代碼有些亂，是直接從項目工程中粘貼出來的，用到了Struts2標籤，JSTL，以及EL等。但是決定表單如何驗證的關鍵在於每個輸入框的“class”屬性。

例如name爲loginname的<input>的class屬性如下：

class="validate[required,minSize[4]] text-input validate[optional,maxSize[20]] text-input"

就規定了輸入內容長度爲4-20字符，如果爲空，效果如下：

再比如name爲repassword的<input>的class屬性如下：

class="validate[required,equals[password]] text-input"

則會比較id爲password的<input>的內容與本<input>是否相同，即確認密碼與密碼是否相同。

再比如name爲email的<input>的class屬性如下：

class="validate[required,custom[email]] text-input"

則驗證本<input>的內容是否符合Email格式

插件官方下載地址爲：http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/