表单验证

<title></title>

    <script src="../../Content/js/jquery/jquery-2.1.1.min.js"></script>
    <script src="../../Content/js/bootstrap/bootstrap.js"></script>
    <link href="../../Content/js/bootstrap/bootstrap.min.css" rel="stylesheet" />
     <script type="text/javascript">

         (function (jQuery) {
             $.extend({
                 Vaild: function (_this) {
                     if (!!$(_this).data("vaild")) {
                         var pattern = new RegExp($(_this).data("vaild"));
                         if (pattern.test($(_this).val())) {
                             $(_this).parent().removeClass("has-error").addClass("has-success");
                             $(_this).popover("destroy");
                         } else {
                             $(_this).parent().addClass("has-error").removeClass("has-success");
                             $(_this).data("toogle", "top").data("placement", "top").data("container", "body").data("content", $(_this).data("errmsg")).popover({ "trigger": "manual" }).popover("show");
                             return false;
                         }
                     } else {
                         $(_this).parent().addClass("has-success");
                     }
                     return true;
                 }
             });
             $.fn.extend({
                 Vaild: function () {
                     $(this).each(function (index, _this) {
                         $(_this).submit(function () {
                             var checkResult = true;
                             for (var i = 0; i < _this.length; i++) {
                                 checkResult = $.Vaild(_this[i]) && checkResult;
                             }
                             return checkResult;
                         });
                         for (var i = 0; i < _this.length; i++) {
                             $(_this[i]).blur(function () {
                                 $.Vaild(this);
                             });
                         }
                     });
                 }
             });
         })(jQuery);

    </script>
     <style>


        /*重构 popover */
        .popover
        {
            background: #C00;
            color: #FFF;
        }
        .popover .popover-content
        {
            padding: 1px 5px;
        }
        .popover.top > .arrow:after
        {
            border-top-color: #C00;
        }

        /*重构 bootstrap 默认错误提示 */
        .has-error input, .has-error textarea, .has-error select
        {
            background-color: #F2DEDE;
        }
        .has-success input, .has-success textarea, .has-success select
        {
            background-color: #DFF0D8;
        }

    </style>
</head>
<body>
    

    <form style="padding:50px">
     <div class=" col-md-6"><input type="text" name="ARTICLE_TITLE" class="form-control" placeholder="文章标题"data-vaild="^[u4e00-u9fa5]{2,15}$" data-errmsg="文章的标题应该是2-15字的中文"/></div>

</form>

</body>

     <script type="text/javascript">
        //prove初始化
        $("form").Vaild();
      </script>
</html>