BoostrapValidator使用方法

今天来介绍一下bootstrapValidator的使用方法。

举个例子介绍一下：

首先建立一个java web工程，工程目录如下：

需要导入的文件有bootstrap.css、boostrapValidator.min.css、bootstrap.js、bootstrapValidator.min.js、form.js、jquery.js

接着建立我们的index.jsp，代码如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>bootstrap校验器</title>
<!-- 引入css文件 -->
<style>
.container {
    width: 100%;
}
 
.showDataTable {
    width: 100%;
}
/*表单中日期组件图标样式配覆盖width:auto*/
.date-input-btn {
    height: 35px;
    width: 35px;
}
 
.qyyj {
    width: 450px;
}
 
.qyyj select {
    height: 25px;
    width: 450px;
    color: #626262;
    line-height: 25px;
    /* background-color:#05b570; */
    margin-right: 1px;
    margin: 1px 0px 1px 2px;
    border: 1 solid #A1AAB3;
}
/*设置标题的文字样式*/
.htext {
    font-size: 14px;
    font-weight: bold;
}
 
/*设置分割线的上下间距*/
hr.fenge {
    margin-top: 10px;
    margin-bottom: 10px;
}
 
/*表单中表单组间距*/
.form-group {
    width: 90%;
    margin-bottom: 10px !important;
}
 
.ue-tabs>li>a {
    font-size: 12px;
    padding: 0 25px;
    line-height: 30px;
    color: #3e99ff
}
 
.form-ll {
    margin-bottom: 10px !important;
    width: 800px;
}
 
.form-picture {
    margin-bottom: 10px !important;
    width: 400px;
    height: 400px
}
 
.form-radio {
    margin-bottom: 10px !important;
    width: 850px;
    height: 850px;
}
 
.Validform_checktip {
    font-size: 14px;
}
 
.btn-cckd {
    font-size: 24.5px;
    border: 1px solid #DDDDDD;
}
</style>
<link rel="stylesheet" href="../css/bootstrap.css" />
<link rel="stylesheet" href="../css/bootstrapValidator.min.css" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<script type="text/javascript" src="../js/bootstrapValidator.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#saveForm').bootstrapValidator({
            // 默认的提示消息
            message : 'This value is not valid',
            // 表单框里右侧的icon
            feedbackIcons : {
                valid : 'glyphicon glyphicon-ok',
                invalid : 'glyphicon glyphicon-remove',
                validating : 'glyphicon glyphicon-refresh'
            },
            fields : {
                email : {
                    trigger : "change",
                    validators : {
                        notEmpty : {
                            message : '邮箱地址不能为空'
                        }
                    }
                }
            }
        });
    });
</script>
</head>
<body>
    <form class="form-horizontal" id="saveForm" name="saveForm"
        onsubmit="return false">
        <table class="showDataTable">
            <tr>
                <td class="TdRight"><label for="exampleInputEmail1">Email
                        address</label></td>
                <td class="TdRight">
                    <div class="form-group">
                        <input type="text" name="email" class="form-control"
                            id="exampleInputEmail1" placeholder="Email">
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>