bt-validate

yunhaifeiwu

浏览: 163028 次
性别:
来自: 宁波

最近访客更多访客>>

testjiang3

weitd

抛出异常的爱

mumuhuiyuan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

bootstrap validate popover

这是一个基于bootstrap的检验组件，改编自网络。利用了bootstrap的popover弹出组件显示出错信息，允许用户在表单组件中使用自定义规则。没有考虑通过ajax方式
服务器返回的验证信息情况。用户在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">&times;</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/