bootStrap表单验证插件的使用
程序员文章站
2022-03-22 12:37:46
bootStrapValidator插件中常用表单验证的使用方法。 ......
bootstrapvalidator插件的使用
1.插件的下载和引用
首先要引入bootstrapvalidator插件。链接的地址：https://www.bootcdn.cn/jquery.bootstrapvalidator/
可以使用网页中的插件连接，也可以将源码下载到本地使用。
要使用bootstrapvalidator插件，代码中还要除了引入bootstrapvalidator插件的js和css外，还要引入jquery.js和bootstrap的js和css。
1 <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 2 <link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapvalidator.min.css"> 3 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> 4 <script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 5 <script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapvalidator.min.js"></script>
注意：所有的表单控件一定要放到类名为from-group的div内部，验证才会生效。html代码如下:
1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px"> 2 <form class="form-horizontal" method="post" action="" id="classes-form"> 3 <div class="box-body"> 4 <div class="form-group"> 5 <label for="inputname" class="col-sm-2 col-sm-offset-1 control-label">班级名称</label> 6 <div class="col-sm-8"> 7 <input type="text" class="form-control" name="class_name" id="inputname" 8 placeholder="请输入班级名称"> 9 </div> 10 </div> 11 </div> 12 </form> 13 </div>
2.bootstrapvalidator的常用验证
2.1 非空验证 notempty
html代码
1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px"> 2 <form class="form-horizontal" method="post" action="" id="classes-form"> 3 <div class="box-body"> 4 <div class="form-group"> 5 <label for="inputname" class="col-sm-2 col-sm-offset-1 control-label">班级名称</label> 6 <div class="col-sm-8"> 7 <input type="text" class="form-control" name="class_name" id="inputname" 8 placeholder="请输入班级名称"> 9 </div> 10 </div> 11 </div> 12 </form> 13 </div>
接着加入验证js代码
1 <script>
2 $(function () {
3 $('#classes-form').bootstrapvalidator({
4 live : 'submitted', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
5 // disabled和submitted代表当点击提交按钮时触发验证
6
7 feedbackicons: { //显示表单验证结果的图标
8 valid: 'glyphicon glyphicon-ok',
9 invalid: 'glyphicon glyphicon-remove',
10 validating: 'glyphicon glyphicon-refresh'
11 },
12 fields: {
13 class_name: {
14 validators: {
15 notempty: {
16 message: '班级名称不能为空'
17 }
18 }
19 }
20 }
21 })
22 })
23 </script>
2.2 数值验证 numeric
html代码
1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px"> 2 <form class="form-horizontal" method="post" action="" id="classes-form"> 3 <div class="box-body"> 4 <div class="form-group"> 5 <label for="inputname" class="col-sm-2 col-sm-offset-1 control-label">商品价格</label> 6 <div class="col-sm-8"> 7 <input type="text" class="form-control" name="price" id="inputname" 8 placeholder="请输入商品价格"> 9 </div> 10 </div> 11 </div> 12 </form> 13 </div>
js验证代码
1 <script>
2 $(function () {
3 $('#classes-form').bootstrapvalidator({
4 live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
5 // disabled和submitted代表当点击提交按钮时触发验证
6
7 feedbackicons: { //显示表单验证结果的图标
8 valid: 'glyphicon glyphicon-ok',
9 invalid: 'glyphicon glyphicon-remove',
10 validating: 'glyphicon glyphicon-refresh'
11 },
12 fields: {
13 price: {
14 validators: {
15 numeric: {
16 message: '价格必须为数值'
17 }
18 }
19 }
20 }
21 })
22 })
23 </script>
2.3 整数验证 digits
html代码
1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px"> 2 <form class="form-horizontal" method="post" action="" id="classes-form"> 3 <div class="box-body"> 4 <div class="form-group"> 5 <label for="inputname" class="col-sm-2 col-sm-offset-1 control-label">班级人数</label> 6 <div class="col-sm-8"> 7 <input type="text" class="form-control" name="std_num" id="inputname" 8 placeholder="请输入班级人数"> 9 </div> 10 </div> 11 </div> 12 </form> 13 </div>
js验证代码
1 <script>
2 $(function () {
3 $('#classes-form').bootstrapvalidator({
4 live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
5 // disabled和submitted代表当点击提交按钮时触发验证
6
7 feedbackicons: { //显示表单验证结果的图标
8 valid: 'glyphicon glyphicon-ok',
9 invalid: 'glyphicon glyphicon-remove',
10 validating: 'glyphicon glyphicon-refresh'
11 },
12 fields: {
13 std_num: {
14 validators: {
15 digits: {
16 message: '价格必须为数值'
17 }
18 }
19 }
20 }
21 })
22 })
23 </script>
2.4 最大值和最小值验证 lessthan和greaterthan
html代码
1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px"> 2 <form class="form-horizontal" method="post" action="" id="classes-form"> 3 <div class="box-body"> 4 <div class="form-group"> 5 <label for="inputname" class="col-sm-2 col-sm-offset-1 control-label">最大最小值</label> 6 <div class="col-sm-8"> 7 <input type="text" class="form-control" name="max_num" id="inputname" 8 placeholder="请输入10-100之间的值"> 9 </div> 10 </div> 11 </div> 12 </form> 13 </div>
js验证代码
1 <script>
2 $(function () {
3 $('#classes-form').bootstrapvalidator({
4 live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
5 // disabled和submitted代表当点击提交按钮时触发验证
6
7 feedbackicons: { //显示表单验证结果的图标
8 valid: 'glyphicon glyphicon-ok',
9 invalid: 'glyphicon glyphicon-remove',
10 validating: 'glyphicon glyphicon-refresh'
11 },
12 fields: {
13 max_num: {
14 validators: {
15 lessthan: { //最大值验证
16 value: 100,
17 inclusive:false, //是否包含当前值，false不包含，true包含。默认为true
18 message: '值不能大于或等于100'
19 },
20 greaterthan: { //最小值验证
21 value:10,
22 inclusive:true,
23 message: '值不能小于10'
24 }
25 }
26 }
27 }
28 })
29 })
30 </script>
2.5 数值范围验证 between
html代码
1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px"> 2 <form class="form-horizontal" method="post" action="" id="classes-form"> 3 <div class="box-body"> 4 <div class="form-group"> 5 <label for="inputname" class="col-sm-2 col-sm-offset-1 control-label">年龄</label> 6 <div class="col-sm-8"> 7 <input type="text" class="form-control" name="age" id="inputname" 8 placeholder="请输入年龄"> 9 </div> 10 </div> 11 </div> 12 </form> 13 </div>
js验证代码
1 <script>
2 $(function () {
3 $('#classes-form').bootstrapvalidator({
4 live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
5 // disabled和submitted代表当点击提交按钮时触发验证
6
7 feedbackicons: { //显示表单验证结果的图标
8 valid: 'glyphicon glyphicon-ok',
9 invalid: 'glyphicon glyphicon-remove',
10 validating: 'glyphicon glyphicon-refresh'
11 },
12 fields: {
13 age: {
14 validators: {
15 between:{
16 max:60,
17 min:18,
18 message: '年龄必须在18~60之间'
19 }
20 }
21 }
22 }
23 })
24 })
25 </script>
2.6 字符串长度验证 stringlength
html代码
1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px"> 2 <form class="form-horizontal" method="post" action="" id="classes-form"> 3 <div class="box-body"> 4 <div class="form-group"> 5 <label for="inputname" class="col-sm-2 col-sm-offset-1 control-label">用户名</label> 6 <div class="col-sm-8"> 7 <input type="text" class="form-control" name="age" id="inputname" 8 placeholder="请输入用户名"> 9 </div> 10 </div> 11 </div> 12 </form> 13 </div>
js验证代码
1 <script>
2 $(function () {
3 $('#classes-form').bootstrapvalidator({
4 live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
5 // disabled和submitted代表当点击提交按钮时触发验证
6
7 feedbackicons: { //显示表单验证结果的图标
8 valid: 'glyphicon glyphicon-ok',
9 invalid: 'glyphicon glyphicon-remove',
10 validating: 'glyphicon glyphicon-refresh'
11 },
12 fields: {
13 age: {
14 validators: {
15 stringlength:{
16 min:8,
17 max:15,
18 message: '用户名长度必须在8~15之间'
19 }
20 }
21 }
22 }
23 })
24 })
25 </script>
2.7 邮箱地址验证 emailaddress
html代码
1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px"> 2 <form class="form-horizontal" method="post" action="" id="classes-form"> 3 <div class="box-body"> 4 <div class="form-group"> 5 <label for="inputname" class="col-sm-2 col-sm-offset-1 control-label">邮箱</label> 6 <div class="col-sm-8"> 7 <input type="text" class="form-control" name="email" id="inputname" 8 placeholder="请输入邮箱地址"> 9 </div> 10 </div> 11 </div> 12 </form> 13 </div>
js验证代码
1 <script>
2 $(function () {
3 $('#classes-form').bootstrapvalidator({
4 live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
5 // disabled和submitted代表当点击提交按钮时触发验证
6
7 feedbackicons: { //显示表单验证结果的图标
8 valid: 'glyphicon glyphicon-ok',
9 invalid: 'glyphicon glyphicon-remove',
10 validating: 'glyphicon glyphicon-refresh'
11 },
12 fields: {
13 email: {
14 validators: {
15 emailaddress:{
16 message: '请输入正确的邮箱地址'
17 }
18 }
19 }
20 }
21 })
22 })
23 </script>
2.8 ip地址验证 ip
html代码
1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px"> 2 <form class="form-horizontal" method="post" action="" id="classes-form"> 3 <div class="box-body"> 4 <div class="form-group"> 5 <label for="inputname" class="col-sm-2 col-sm-offset-1 control-label">ip</label> 6 <div class="col-sm-8"> 7 <input type="text" class="form-control" name="ip" id="inputname" 8 placeholder="请输入ip地址"> 9 </div> 10 </div> 11 </div> 12 </form> 13 </div>
js验证代码
1 <script>
2 $(function () {
3 $('#classes-form').bootstrapvalidator({
4 live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
5 // disabled和submitted代表当点击提交按钮时触发验证
6
7 feedbackicons: { //显示表单验证结果的图标
8 valid: 'glyphicon glyphicon-ok',
9 invalid: 'glyphicon glyphicon-remove',
10 validating: 'glyphicon glyphicon-refresh'
11 },
12 fields: {
13 ip: {
14 validators: {
15 ip:{
16 message: '请输入正确的ip地址'
17 }
18 }
19 }
20 }
21 })
22 })
23 </script>
2.9 日期格式验证 date
html代码
1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px"> 2 <form class="form-horizontal" method="post" action="" id="classes-form"> 3 <div class="box-body"> 4 <div class="form-group"> 5 <label for="inputname" class="col-sm-2 col-sm-offset-1 control-label">出生日期</label> 6 <div class="col-sm-8"> 7 <input type="text" class="form-control" name="birthday" id="inputname" 8 placeholder="请输入出生日期"> 9 </div> 10 </div> 11 </div> 12 </form> 13 </div>
js验证代码
1 <script>
2 $(function () {
3 $('#classes-form').bootstrapvalidator({
4 live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
5 // disabled和submitted代表当点击提交按钮时触发验证
6
7 feedbackicons: { //显示表单验证结果的图标
8 valid: 'glyphicon glyphicon-ok',
9 invalid: 'glyphicon glyphicon-remove',
10 validating: 'glyphicon glyphicon-refresh'
11 },
12 fields: {
13 birthday: {
14 validators: {
15 date:{
16 format: 'yyyy-mm-dd',
17 message: '请输入正确的出生日期'
18 }
19 }
20 }
21 }
22 })
23 })
24 </script>
2.10 正则验证 regexp
通过正则验证，我们可以定制自己所需要的格式的输入验证。如上面的邮箱地址，或者身份证号或手机号等，我们都可以通过正则表达式来进行验证。
下面为手机号验证代码：
html代码
1 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px"> 2 <form class="form-horizontal" method="post" action="" id="classes-form"> 3 <div class="box-body"> 4 <div class="form-group"> 5 <label for="inputname" class="col-sm-2 col-sm-offset-1 control-label">手机号</label> 6 <div class="col-sm-8"> 7 <input type="text" class="form-control" name="phone_num" id="inputname" 8 placeholder="请输入手机号"> 9 </div> 10 </div> 11 </div> 12 </form> 13 </div>
js验证代码
1 <script>
2 $(function () {
3 $('#classes-form').bootstrapvalidator({
4 live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证(默认值)，
5 // disabled和submitted代表当点击提交按钮时触发验证
6
7 feedbackicons: { //显示表单验证结果的图标
8 valid: 'glyphicon glyphicon-ok',
9 invalid: 'glyphicon glyphicon-remove',
10 validating: 'glyphicon glyphicon-refresh'
11 },
12 fields: {
13 phone_num: {
14 validators: {
15 regexp:{
16 regexp: /^1[3-9][\d]{9}$/, //正则规则用两个/包裹起来
17 message: '请输入正确的手机号'
18 }
19 }
20 }
21 }
22 })
23 })
24 </script>
3.总结
以上为经常会用到的一些表单验证，若有不正确或需要补充的，欢迎指出。
想了解更多bootstrapvalidator的更多验证，也可以进入 https://github.com/nghuuphuoc/bootstrapvalidator 下载源码学习研究。