jquery.validate结合poshytip实现表单完美验证

1.需要引用的js

<script src="/Themes/default/lib/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
   <!--气泡提示--> <script src="/Themes/default/lib/poshytip/jquery.poshytip.min.js" type="text/javascript"></script> <link href="/Themes/default/lib/poshytip/tip-yellow/tip-yellow.css" rel="stylesheet" type="text/css" />
<!--公共函数-->
   <script src="/Themes/default/lib/function.js" type="text/javascript"></script>
 function.js代码：

//============================================
//formtip===================================
(function($) {
    $.fn.formtip = function(message, second, option) {
        if (second == undefined)
            second = 3;
        $(".tip-yellow").remove();
        try {
            $(this).poshytip({ className: 'tip-yellow', content: message, timeOnScreen: second * 1000, showOn: 'none', alignTo: 'target', alignX: 'inner-left', offsetX: 0, offsetY: 5 }).poshytip("show");
         $(this).focus();//注意，要结合jquery.validate必须放在后面
        } catch (e) {
            $(this).blur(function() {
                 alert(message);
            });

        }
    }
})(jQuery);
//====================================


   <!--表单验证，需要在字段上加上class="required"-->
   <script src="/Themes/default/lib/validate/jquery.validate.min.js" type="text/javascript"></script>
   <script src="/Themes/default/lib/validate/messages_cn.js" type="text/javascript"></script>
   <script src="/Themes/default/lib/validate/jquery.validate.extend.js" type="text/javascript"></script>

2. 页面使用

  //表单验证
    $("#form_customer").validate({
        rules: {
            cus_name: {
                rangelength: [2, 20]
            },
            cus_tel: {
                remote: {
                    url: '/Apps/CRM/LoadData/ValidatePhone/'
                    //                    ,data: {
                    //                        action: function () { return "validate_phone"; }
                    //                    }
                },
                con_name: {
                    rangelength: [2, 20]
                }
            }
        },
        messages: {
            cus_name: {
                required: "客户名称不能为空！",
                rangelength: "客户名称长度必须在2-20之间"
            },
            cus_tel: {
                remote: "该电话或手机号码已存在！"
            },
            con_name: {
                required: "主联系人名称不能为空！",
                rangelength: "主联系人名称长度必须在2-20之间"
            }
        },
//        success: function(element) {
//            var elem = $(element);
//            elem.poshytip('disable');
//            elem.poshytip('destroy');
//        },
        errorPlacement: function(error, element) {
            var errorMsg = error[0].innerHTML;
            var elementName = element[0].name;
            $("#" + elementName).formtip(errorMsg);
        }
    });

3.演示

如有大家有什么问题，可以给我留言，我会抽时间一一解答。

笔者微博：@LeaveBugsAway欢迎叨扰。