bt-validate bootstrapvalidatepopover
程序员文章站
2022-05-30 23:17:46
...
这是一个基于bootstrap的检验组件，改编自网络。 利用了bootstrap的popover弹出组件显示出错信息，允许用户在表单组件中使用自定义规则。没有考虑 通过ajax方式
服务器返回的验证信息情况。 用户在ajax下，可通过 类似的语法进行设置显示：
el.next().popover("show"); 至于其他，请按js操作dom节点的方式修改popover的
显示内容
效果图：
使用：
1 引入 jQuery 和 Bootstrap 库，
2 然后绑定需要验证的表单 $('#form').validation()
例：
3 表单中两种使用 示例：
上面，使用了js组件中 预定义的mail验证、自定义了popover对话框的样式、自定义出错信息
上面中，用户使用了自已的正则验证、自定义了popover对话框的样式、自定义出错信息。
其中注意：mail是bt-validate中已经预定义的规则 ，而 btvdclass是 用户自定义的css样式，没包含在bt-validate组件中。btvdclass样式定义位置可见随后的完整例子，具体代码摘录如下：
完整的 示例（js之类的位置略）
PS:原作者见：
[Validation-for-Bootstrap](http://fatesheep.github.com/Validation-for-Bootstrap/)
本地址见：
https://github.com/yunhaifeiwu/bt-validate/
服务器返回的验证信息情况。 用户在ajax下，可通过 类似的语法进行设置显示：
el.next().popover("show"); 至于其他，请按js操作dom节点的方式修改popover的
显示内容
效果图：
使用：
1 引入 jQuery 和 Bootstrap 库，
2 然后绑定需要验证的表单 $('#form').validation()
例：
<script type="text/javascript">
$('#zedit').validation();
</script>
3 表单中两种使用 示例：
<input type="text" btvd-type="mail" btvd-class='btvdclass' btvd-err="data-邮箱格式不正确！" >
上面，使用了js组件中 预定义的mail验证、自定义了popover对话框的样式、自定义出错信息
<input type="text" placeholder="a…" btvd-el='/^[0-9]\d*$/' btvd-class='btvdclass' btvd-err="data-必须输入数字！" >
上面中，用户使用了自已的正则验证、自定义了popover对话框的样式、自定义出错信息。
其中注意：mail是bt-validate中已经预定义的规则 ，而 btvdclass是 用户自定义的css样式，没包含在bt-validate组件中。btvdclass样式定义位置可见随后的完整例子，具体代码摘录如下：
.btvdclass{
border-color:#FF0000;
color:#FF0000;
font-weight:normal;
}
完整的 示例（js之类的位置略）
<!DOCTYPE html>
<html lang="utf-8">
<head>
<title>hello world</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet" media="screen"/>
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/>
<style type="text/css">
/*自定义样式，实现个性化页面*/
.show-grid {
margin-left: 10px;
margin-top: 10px; margin-bottom: 20px;
width:720px;
border:1px solid #4E7590;
background-color: #F5F5F5;
}
.show-grid legend{
background-color: #108AC6;
border:1px solid #fff;
width:718px;
text-align: center;
}
.myright{
float:right;
}
.contextbox{
padding: 20px 0px 30px 30px;
}
.bottombox{
background-color: #D5D5D5;
border:1px solid #fff;
width:718px;
}
.btvdclass{
border-color:#FF0000;
color:#FF0000;
font-weight:normal;
}
</style>
<script src="../js/jquery-1.9.1.min.js" type="text/javascript"> </script>
<script src="../bootstrap/js/bootstrap.js" type="text/javascript" > </script>
<script src="../js/validation/bt-validate.js" type="text/javascript"></script>
</head>
<body>
<div id="myModal" class="modal" style="width:800px;left:40%;" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="false">×</button>
<h3>对话框标题</h3>
</div>
<div class="modal-body">
<form id="zedit" class="show-grid form-inline">
<fieldset>
<div class="contextbox">
<div class="row ">
<div class="span3">
<label>Label aaaaaaname</label>
<input id="psw" class=" " type="text" btvd-type="mail"
btvd-class='btvdclass'
btvd-err="data-邮箱格式不正确！" >
</div>
<div class="span3">
<label>Label aname</label>
<input class="" type="text" placeholder="a…" btvd-el='/^[0-9]\d*$/'
btvd-class='btvdclass'
btvd-err="data-必须输入数字！"
>
</div>
</div><br>
<div class="row ">
<div class="span3">
<label >Label bbname</label>
<input class="hori-margin" type="text" placeholder="Type something…">
</div>
<div class="span3">
<label >Label bbbbbname</label>
<input id="dd" class="hori-margin" type="text" placeholder="Type something…">
</div>
</div>
</div>
<div class="bottombox">
<div class="row contextbox ">
<button type="submit"
class="btn hori-margin myright ">Submitddddd</button>
<button type="submit" class="btn hori-margin myright ">Submitzzz</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<script type="text/javascript">
$('#zedit').validation();
</script>
</body>
</html>
PS:原作者见：
[Validation-for-Bootstrap](http://fatesheep.github.com/Validation-for-Bootstrap/)
本地址见：
https://github.com/yunhaifeiwu/bt-validate/
