一、工具準備：
1、boostrap: 下載地址 http://getbootstrap.com/
jquery: jQuery版本需大于或等于1.8.0
jquery.validate.min.js
2、validate 及 tooltip 使用教程：
菜鳥教程地址：http://www.runoob.com/jquery/jquery-plugin-validate.html
以下指示列出了一些常用配置項，比較重要的加紅區別。
| 描述 | 代碼 |
|---|---|
| debug：進行調試模式（表單不提交）。 | $(".selector").validate({ debug:true}) |
| 把調試設置為默認。 | $.validator.setDefaults({ debug:true}) |
| submitHandler：通過驗證后運行的函數，里面要加上表單提交的函數，否則表單不會提交。 | $(".selector").validate({ submitHandler:function(form) { $(form).AjaxSubmit(); }}) |
| ignore：對某些元素不進行驗證。 | $("#myform").validate({ ignore:".ignore"}) |
| rules：自定義規則，key:value 的形式，key 是要驗證的元素，value 可以是字符串或對象。 | $(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }}) |
| messages：自定義的提示信息，key:value 的形式，key 是要驗證的元素，value 可以是字符串或函數。 | $(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }, messages:{ name:"Name不能為空", email:{ required:"E-mail不能為空", email:"E-mail地址不正確" } }}) |
| groups：對一組元素的驗證，用一個錯誤提示，用 errorPlacement 控制把出錯信息放在哪里。 | $("#myform").validate({ groups:{ username:"fname lname" }, errorPlacement:function(error,element) { if (element.attr("name") == "fname" || element.attr("name") == "lname") error.insertAfter("#lastname"); else error.insertAfter(element); }, debug:true}) |
| Onubmit：類型 Boolean，默認 true，指定是否提交時驗證。 | $(".selector").validate({ onsubmit:false}) |
| onfocusout：類型 Boolean，默認 true，指定是否在獲取焦點時驗證。 | $(".selector").validate({ onfocusout:false}) |
| onkeyup：類型 Boolean，默認 true，指定是否在敲擊鍵盤時驗證。 | $(".selector").validate({ onkeyup:false}) |
| onclick：類型 Boolean，默認 true，指定是否在鼠標點擊時驗證（一般驗證 checkbox、radiobox）。 | $(".selector").validate({ onclick:false}) |
| focusInvalid：類型 Boolean，默認 true。提交表單后，未通過驗證的表單（第一個或提交之前獲得焦點的未通過驗證的表單）會獲得焦點。 | $(".selector").validate({ focusInvalid:false}) |
| focusCleanup：類型 Boolean，默認 false。當未通過驗證的元素獲得焦點時，移除錯誤提示（避免和 focusInvalid 一起使用）。 | $(".selector").validate({ focusCleanup:true}) |
| errorClass：類型 String，默認 "error"。指定錯誤提示的 CSS 類名，可以自定義錯誤提示的樣式。 | $(".selector").validate({ errorClass:"invalid"}) |
| errorElement：類型 String，默認 "label"。指定使用什么標簽標記錯誤。 | $(".selector").validate errorElement:"em"}) |
| wrapper：類型 String，指定使用什么標簽再把上邊的 errorELement 包起來。 | $(".selector").validate({ wrapper:"li"}) |
| errorLabelContainer：類型 Selector，把錯誤信息統一放在一個容器里面。 | $("#myform").validate({ errorLabelContainer:"#messageBox", wrapper:"li", submitHandler:function() { alert("Submitted!") }}) |
| showErrors：跟一個函數，可以顯示總共有多少個未通過驗證的元素。 | $(".selector").validate({ showErrors:function(errorMap,errorList) { $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below."); this.defaultShowErrors(); }}) |
| errorPlacement：跟一個函數，可以自定義錯誤放到哪里。 | $("#myform").validate({ errorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td")); }, debug:true}) |
| success：要驗證的元素通過驗證后的動作，如果跟一個字符串，會當作一個 css 類，也可跟一個函數。 | $("#myform").validate({ success:"valid", submitHandler:function() { alert("Submitted!") }}) |
| highlight：可以給未通過驗證的元素加效果、閃爍等。 | |
| unhighlight: 可以給通過驗證的元素加特效 | $("#myform").validate({ unhighlight:function(element,errorClass,validClass) { //TODO }}) |
下面是一些提示工具（Tooltip）插件中有用的方法：
| 方法 | 描述 | 實例 |
|---|---|---|
| Options: .tooltip(options) | 向元素集合附加提示工具句柄。 | $().tooltip(options) |
| Toggle: .tooltip('toggle') | 切換顯示/隱藏元素的提示工具。 | $('#element').tooltip('toggle') |
| Show: .tooltip('show') | 顯示元素的提示工具。 | $('#element').tooltip('show') |
| Hide: .tooltip('hide') | 隱藏元素的提示工具。 | $('#element').tooltip('hide') |
| Destroy: .tooltip('destroy') | 隱藏并銷毀元素的提示工具。 | $('#element').tooltip('destroy') |
3、添加js引用：如下，jQuery需要在最前面引用
4、頁面代碼：
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml";}@section css{ <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <style> .error { color: red; border-color:red; } .valid { color: black; } </style>}<div class="contrainer" style="align:center;"> <h2>JQuery Validate 表單驗證</h2> <div class="row " style="margin:100px 20px;"> <div class="col-sm-5 col-sm-offset-2"> <form class="form-horizontal" id="id_frm"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" name="email" class="form-control" title="請填寫郵箱地址" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassWord3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" name="password" class="form-control" title="請填寫密碼" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox">Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> </div> </div></div>@section scripts{ <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="~/Scripts/jquery.validate.min.js"></script> <script type="text/javascript"> $(function () { $("#id_frm").validate({ rules: { email: { required: true, email: true }, password: 'required' }, messages: { email: { required: "請填寫郵箱地址", email: "郵箱格式不正確" }, password: "請填寫密碼" }, errorClass: "error", success: 'valid', unhighlight: function (element, errorClass, validClass) { //驗證通過 $(element).tooltip('destroy').removeClass(errorClass); }, //highlight: function (element, errorClass, validClass) { //未通過驗證 // // TODO //} //, errorPlacement: function (label, element) { $(element).tooltip('destroy'); /*必需*/ $(element).attr('title', $(label).text()).tooltip('show'); }, submitHandler: function (form) { alert('驗證通過'); } }) }) </script>}
PS：之所以沒有使用highlight來捕獲未通過事件，是因為highlight函數參數中無法接收到label元素，也就無法獲取錯誤信息，故改用errorPlacement.
5、效果如圖：
沒有輸入任何東西：
輸入錯的email地址：
對比之后可以發現，tooltip 會動態改變并顯示錯誤信息。
轉自：http://www.cnblogs.com/qiufengke/p/4964893.html
新聞熱點
疑難解答
