一、工具準備：

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　

? ? 以下指示列出了一些常用配置項，比較重要的加紅區別。

validate ()的可選項

描述代碼

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").validateerrorElement:"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、頁面代碼：

　

@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;">&nbsp;&nbsp; <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 (error, element) {if ($(element).next("div").hasClass("tooltip")) {$(element).attr("data-original-title", $(error).text()).tooltip("show");} else {$(element).attr("title", $(error).text()).tooltip("show");}},submitHandler: function (form) {alert('驗證通過');}})})</script> }PS：之所以沒有使用highlight來捕獲未通過事件，是因為highlight函數參數中無法接收到label元素，也就無法獲取錯誤信息，故改用errorPlacement.

?

?

?

5、效果如圖：

　　 ? ?沒有輸入任何東西：

? ? ? ??

　　 ? ?　　　　　　　　　

　　輸入錯的email地址：

　　　　　　 ? ? ? ? ? ?　　

　　對比之后可以發現，tooltip 會動態改變并顯示錯誤信息。

?

?

轉載于:https://www.cnblogs.com/qiufengke/p/4964893.html

總結

以上是生活随笔為你收集整理的Validate + Boostrap tooltip 表单验证示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。