jQuery Validate自定義表單元素驗證通過和不通過的樣式
在jQuery Validate自定義錯誤資訊的樣式一章節介紹瞭如何設定錯誤資訊的樣式。
下面介紹一下如何自定義對應表單元素通過驗證和沒有通過驗證的樣式資訊。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #thetable { font-size:12px; } #thetable td { width:40px; height:30px; line-height:30px; text-align:center; } #thetable tr > td:nth-of-type(3) { width:120px; text-align:left; } span.error { color:red } input.error { border:1px dotted red; } input.success { background:#ccc; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://www.softwhy.com/demo/jQuery/js/jquery.validate.js"></script> <script src="http://www.softwhy.com/demo/jQuery/js/messages_zh.js"></script> <script> $(document).ready(function () { $("#myform").validate({ errorClass: "error", validClass:"success", errorElement: "span", wrapper: "li", errorLabelContainer: $("#ant ul"), errorContainer: $("#ant"), rules: { username: "required", pw: "required", email: { required: true, email:true } }, messages: { name: "使用者名稱是必填專案", pw: "密碼是必填專案", email: { required: "郵箱是必填專案", email:"郵箱格式不正確" } } }); }); </script> </head> <body> <div id="ant"> <ul></ul> </div> <form id="myform"> <table id="thetable"> <tr> <td>姓名:</td> <td><input type="text" name="username"/></td> <td></td> </tr> <tr> <td>密碼:</td> <td><input type="password" name="pw" /></td> <td></td> </tr> <tr> <td>郵箱:</td> <td><input type="text" name="email"/></td> <td></td> </tr> <tr> <td colspan="3"> <input type="submit" value="提交"> <input type="reset" value="重置"> </td> </tr> </table> </form> </body> </html>
上面的程式碼演示了我們的要求,下面對實現原理做一下簡單介紹。
(1).errorClass定義的樣式類用於驗證失敗的表單元素和errorElement規定的錯誤資訊容器元素。
(2).validClass定義的樣式類用於驗證成功的表單元素。
特別說明:errorClass定義的樣式類會被同時新增到表單元素和對應的errorElement規定的錯誤資訊容器元素。
所以css程式碼最好使用如下形式:
[CSS] 純文字檢視 複製程式碼span.error { color:red } input.error { border:1px dotted red; }
儘量避免使用如下方式:
[CSS] 純文字檢視 複製程式碼.error { color:red } .error { border:1px dotted red; }
本質上是呼叫的highlight()和unhighlight()方法,具體用法可以參閱以下兩篇文章:
(1).jQuery Validate的highlight()方法一章節。
(2).jQuery Validate的unhighlight()方法一章節。
相關文章
- jQuery Validate自定義驗證成功資訊jQuery
- jQuery validate 自定義樣式、規則jQuery
- jquery.validate 表單驗證jQuery
- jQuery Validate自定義驗證錯誤資訊jQuery
- jQuery Validate新增自定義驗證規則jQuery
- Laravel 自定義表單驗證-自定義驗證規則Laravel
- jQuery Validate忽略指定元素不驗證jQuery
- jQuery Validate表單驗證基本流程介紹jQuery
- Layui 自定義表單驗證UI
- Laravel, vee-validate, 阿波羅 自定義表單時時驗證Laravel
- PHPCMS自定義表單樣式PHP
- mongoose使用validate驗證, 獲取自定義驗證資訊Go
- .net 透過特性及繼承IValidatableObject完成自定義表單驗證繼承Object
- 表單驗證自定義格式輸出
- validate表單驗證外掛
- element-ui表單驗證輸入空格也能驗證通過UI
- jQuery Validate表單驗證(使用者註冊簡單應用)jQuery
- 如何自定義Struts2表單驗證後的錯誤資訊顯示格式/樣式
- angular中的表單資料自定義驗證Angular
- jquery 表單驗證jQuery
- jQuery Validate對select下拉選單驗證jQuery
- jquery validate 手工驗證方法jQuery
- 自定義通過PopupWindow實現通用選單
- Laravel 自定義表單請求驗證忽略某些欄位驗證Laravel
- jquery給元素新增樣式表的方法jQuery
- jQuery Validate驗證規則的使用jQuery
- jQuery Validate驗證觸發的方式jQuery
- jQuery Validate checkbox和radio驗證jQuery
- vue表單驗證你真的會了嗎?元件之表單驗證(form)validateVue元件ORM
- MySQL使用之五_自定義函式和自定義過程MySql函式
- jquery通過name屬性匹配元素jQuery
- jQuery選擇器——表單元素過濾選擇器jQuery
- Jquery Validate自定義驗證規則,一個漢字等於兩個字元長度jQuery字元
- Angular從零到一2.5 驗證結果的樣式自定義Angular
- 自定義密碼驗證函式密碼函式
- 利用js編寫一個簡單的html表單驗證,驗證通過時提交資料(附原始碼)JSHTML原始碼
- jQuery Validate非同步ajax方式驗證jQuery非同步
- jQuery Validate驗證規則使用演示jQuery