【转】Validate + Boostrap tooltip 表单验证示例

一、工具准备：

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 ()的可选项

$(".selector").validate
({
	debug:true
})

$.validator.setDefaults({
	debug:true
})

$(".selector").validate({
	submitHandler:function(form) {
		$(form).ajaxSubmit();
	}
})

$("#myform").validate({
	ignore:".ignore"
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	}
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	},
	messages:{
		name:"Name不能为空",
		email:{
			required:"E-mail不能为空",
			email:"E-mail地址不正确"
		}
	}
})

$("#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
})

$(".selector").validate({
	onsubmit:false
})

$(".selector").validate({
	onfocusout:false
})

$(".selector").validate({
   onkeyup:false
})

$(".selector").validate({
   onclick:false
})

$(".selector").validate({
   focusInvalid:false
})

$(".selector").validate({
   focusCleanup:true
})

$(".selector").validate({
	errorClass:"invalid"
})

$(".selector").validate
   errorElement:"em"
})

$(".selector").validate({
   wrapper:"li"
})

$("#myform").validate({
	errorLabelContainer:"#messageBox",
	wrapper:"li",
	submitHandler:function() {
		alert("Submitted!")
	}
})

$(".selector").validate({
	showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
		this.defaultShowErrors();
	}
})

$("#myform").validate({
	errorPlacement:function(error,element) {
		error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})

$("#myform").validate({
	success:"valid",
        submitHandler:function() {
			alert("Submitted!")
		}
})

$("#myform").validate({
	unhighlight:function(element,errorClass,validClass) {
		//TODO
   }
})

下面是一些提示工具（Tooltip）插件中有用的方法：

$().tooltip(options)

$(‘#element‘).tooltip(‘toggle‘)

$(‘#element‘).tooltip(‘show‘)

$(‘#element‘).tooltip(‘hide‘)

$(‘#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;">
    &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 (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