首页 > 代码库 > jquery.validate结合poshytip实现表单完美验证

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

2024-07-21 00:38:58   214人阅读

1.需要引用的js

 
  1. <script src=http://www.mamicode.com/"/Themes/default/lib/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>  
  2.  

    <!--气泡提示-->
    <script src="http://www.mamicode.com/Themes/default/lib/poshytip/jquery.poshytip.min.js" type="text/javascript"></script>
    <link href="http://www.mamicode.com/Themes/default/lib/poshytip/tip-yellow/tip-yellow.css" rel="stylesheet"
    type="text/css" />

  3. <!--公共函数-->  
  4.    <script src=http://www.mamicode.com/"/Themes/default/lib/function.js" type="text/javascript"></script>  
  5.  function.js代码：  
  6.  
  7. //============================================  
  8. //formtip===================================  
  9. (function($) {  
  10.     $.fn.formtip = function(message, second, option) {  
  11.         if (second == undefined)  
  12.             second = 3;  
  13.         $(".tip-yellow").remove();  
  14.         try {  
  15.             $(this).poshytip({ className: ‘tip-yellow‘, content: message, timeOnScreen: second * 1000, showOn: ‘none‘, alignTo: ‘target‘, alignX: ‘inner-left‘, offsetX: 0, offsetY: 5 }).poshytip("show");  
  16.          $(this).focus();//注意，要结合jquery.validate必须放在后面  
  17.         } catch (e) {  
  18.             $(this).blur(function() {  
  19.                  alert(message);  
  20.             });  
  21.              
  22.         }  
  23.     }  
  24. })(jQuery);  
  25. //====================================  
  26.  
  27.  
  28.    <!--表单验证，需要在字段上加上class="required"-->  
  29.    <script src=http://www.mamicode.com/"/Themes/default/lib/validate/jquery.validate.min.js" type="text/javascript"></script>  
  30.    <script src=http://www.mamicode.com/"/Themes/default/lib/validate/messages_cn.js" type="text/javascript"></script>  
  31.    <script src=http://www.mamicode.com/"/Themes/default/lib/validate/jquery.validate.extend.js" type="text/javascript"></script>  
  32.  

2. 页面使用

 
  1.   //表单验证  
  2.     $("#form_customer").validate({  
  3.         rules: {  
  4.             cus_name: {  
  5.                 rangelength: [2, 20]  
  6.             },  
  7.             cus_tel: {  
  8.                 remote: {  
  9.                     url: ‘/Apps/CRM/LoadData/ValidatePhone/‘  
  10.                     //                    ,data: {  
  11.                     //                        action: function () { return "validate_phone"; }  
  12.                     //                    }  
  13.                 },  
  14.                 con_name: {  
  15.                     rangelength: [2, 20]  
  16.                 }  
  17.             }  
  18.         },  
  19.         messages: {  
  20.             cus_name: {  
  21.                 required: "客户名称不能为空！",  
  22.                 rangelength: "客户名称长度必须在2-20之间" 
  23.             },  
  24.             cus_tel: {  
  25.                 remote: "该电话或手机号码已存在！" 
  26.             },  
  27.             con_name: {  
  28.                 required: "主联系人名称不能为空！",  
  29.                 rangelength: "主联系人名称长度必须在2-20之间" 
  30.             }  
  31.         },  
  32. //        success: function(element) {  
  33. //            var elem = $(element);  
  34. //            elem.poshytip(‘disable‘);  
  35. //            elem.poshytip(‘destroy‘);  
  36. //        },  
  37.         errorPlacement: function(error, element) {  
  38.             var errorMsg = error[0].innerHTML;  
  39.             var elementName = element[0].name;  
  40.             $("#" + elementName).formtip(errorMsg);  
  41.         }  
  42.     }); 

3.演示

20140903201127

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

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

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


联系
我们