表单验证
<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>
<!--prove-->
<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>
