【转】Validate+Boostraptooltip表单验证示例

一、工具准备：

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");elseerror.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>}<divclass="contrainer"style="align:center;">

&nbsp;&nbsp; <h2>JQuery Validate 表单验证</h2>

<divclass="row"style="margin:100px 20px;">

<divclass="col-sm-5 col-sm-offset-2">

<formclass="form-horizontal"id="id_frm">

<divclass="form-group">

<labelfor="inputEmail3"class="col-sm-2 control-label">Email</label>

<divclass="col-sm-10">

<input type="email"name="email"class="form-control"title="请填写邮箱地址"placeholder="Email">

</div>

</div>

<divclass="form-group">

<labelfor="inputPassWord3"class="col-sm-2 control-label">Password</label>

<divclass="col-sm-10">

<input type="password"name="password"class="form-control"title="请填写密码"placeholder="Password">

</div>

</div>

<divclass="form-group">

<divclass="col-sm-offset-2 col-sm-10">

<divclass="checkbox">

<label>

<input type="checkbox">Remember me</label>

</div>

</div>

</div>

<divclass="form-group">

<divclass="col-sm-offset-2 col-sm-10">

<button type="submit"class="btn btn-default">Signin</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