bootStrap表单验证插件的使用

bootStrapValidator插件的使用

1.插件的下载和引用

首先要引入bootstrapValidator插件。链接的地址：https://www.bootcdn.cn/jquery.bootstrapvalidator/
可以使用网页中的插件连接，也可以将源码下载到本地使用。
要使用bootstrapValidator插件，代码中还要除了引入bootstrapValidator插件的js和css外，还要引入jQuery.js和bootStrap的js和css。

<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

注意：所有的表单控件一定要放到类名为from-group的div内部，验证才会生效。html代码如下:

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级名称</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="class_name" id="inputName"
                            placeholder="请输入班级名称">
                 </div>
             </div>
         </div>
     </form>
 </div>

2.bootStrapValidator的常用验证

2.1 非空验证 notEmpty

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级名称</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="class_name" id="inputName"
                            placeholder="请输入班级名称">
                 </div>
             </div>
         </div>
     </form>
 </div>

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级名称</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="class_name" id="inputName"
                            placeholder="请输入班级名称">
                 </div>
             </div>
         </div>
     </form>
 </div>

接着加入验证js代码

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'submitted', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
             // disabled和submitted代表当点击提交按钮时触发验证
 
             feedbackIcons: {  //显示表单验证结果的图标
                  valid: 'glyphicon glyphicon-ok',
                  invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 class_name: {
                     validators: {
                         notEmpty: {
                             message: '班级名称不能为空'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.2 数值验证 numeric

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">商品价格</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="price" id="inputName"
                             placeholder="请输入商品价格">
                 </div>
             </div>
         </div>
     </form>
 </div>

js验证代码

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
             // disabled和submitted代表当点击提交按钮时触发验证
 
             feedbackIcons: {  //显示表单验证结果的图标
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 price: {
                     validators: {
                         numeric: {
                            message: '价格必须为数值'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.3 整数验证 digits

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">班级人数</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="std_num" id="inputName"
                            placeholder="请输入班级人数">
                 </div>
             </div>
         </div>
     </form>
 </div>

js验证代码

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
             // disabled和submitted代表当点击提交按钮时触发验证
 
             feedbackIcons: {  //显示表单验证结果的图标
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 std_num: {
                     validators: {
                         digits: {
                             message: '价格必须为数值'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.4 最大值和最小值验证 lessThan和greaterThan

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">最大最小值</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="max_num" id="inputName"
                            placeholder="请输入10-100之间的值">
                 </div>
             </div>
         </div>
     </form>
 </div>

js验证代码

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
             // disabled和submitted代表当点击提交按钮时触发验证
 
             feedbackIcons: {  //显示表单验证结果的图标
                  valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 max_num: {
                     validators: {
                         lessThan: { //最大值验证
                             value: 100,
                             inclusive:false, //是否包含当前值，false不包含，true包含。默认为true
                             message: '值不能大于或等于100'
                         },
                         greaterThan: {  //最小值验证
                             value:10,
                             inclusive:true,
                             message: '值不能小于10'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.5 数值范围验证 between

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">年龄</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="age" id="inputName"
                            placeholder="请输入年龄">
                 </div>
             </div>
         </div>
     </form>
 </div>

js验证代码

<script>
     $(function () {
         $('#classes-form').bootstrapValidator({
            live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
             // disabled和submitted代表当点击提交按钮时触发验证
 
             feedbackIcons: {  //显示表单验证结果的图标
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 age: {
                     validators: {
                         between:{
                             max:60,
                             min:18,
                             message: '年龄必须在18~60之间'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.6 字符串长度验证 stringLength

html代码

<div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">用户名</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="age" id="inputName"
                            placeholder="请输入用户名">
                 </div>
             </div>
         </div>
     </form>
 </div>

js验证代码

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
             // disabled和submitted代表当点击提交按钮时触发验证
 
             feedbackIcons: {  //显示表单验证结果的图标
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 age: {
                    validators: {
                         stringLength:{
                             min:8,
                             max:15,
                             message: '用户名长度必须在8~15之间'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.7 邮箱地址验证 emailAddress

html代码

<div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
        <div class="box-body">
             <div class="form-group">
                <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">邮箱</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="email" id="inputName"
                            placeholder="请输入邮箱地址">
                 </div>
             </div>
         </div>
     </form>
 </div>

js验证代码

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
             // disabled和submitted代表当点击提交按钮时触发验证
 
             feedbackIcons: {  //显示表单验证结果的图标
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 email: {
                     validators: {
                         emailAddress:{
                             message: '请输入正确的邮箱地址'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.8 IP地址验证 ip

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">IP</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="ip" id="inputName"
                            placeholder="请输入IP地址">
                 </div>
             </div>
         </div>
     </form>
 </div>

js验证代码

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
             // disabled和submitted代表当点击提交按钮时触发验证
 
             feedbackIcons: {  //显示表单验证结果的图标
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 ip: {
                     validators: {
                         ip:{
                             message: '请输入正确的ip地址'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.9 日期格式验证 date

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">出生日期</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="birthday" id="inputName"
                            placeholder="请输入出生日期">
                 </div>
             </div>
         </div>
     </form>
 </div>

js验证代码

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
             // disabled和submitted代表当点击提交按钮时触发验证
 
             feedbackIcons: {  //显示表单验证结果的图标
                 valid: 'glyphicon glyphicon-ok',
                 invalid: 'glyphicon glyphicon-remove',
             },
             fields: {
                 birthday: {
                     validators: {
                         date:{
                             format: 'YYYY-MM-DD',
                             message: '请输入正确的出生日期'
                         }
                     }
                 }
             }
         })
     })
 </script>

2.10 正则验证 regexp

通过正则验证，我们可以定制自己所需要的格式的输入验证。如上面的邮箱地址，或者身份证号或手机号等，我们都可以通过正则表达式来进行验证。

下面为手机号验证代码：

html代码

 <div class="col-lg-8 col-lg-offset-2" style="padding-top: 40px">
     <form class="form-horizontal" method="post" action="" id="classes-form">
         <div class="box-body">
             <div class="form-group">
                 <label for="inputName" class="col-sm-2 col-sm-offset-1 control-label">手机号</label>
                 <div class="col-sm-8">
                     <input type="text" class="form-control" name="phone_num" id="inputName"
                            placeholder="请输入手机号">
                 </div>
             </div>
         </div>
     </form>
 </div>

js验证代码

 <script>
     $(function () {
         $('#classes-form').bootstrapValidator({
             live : 'enabled', //enabled代表当表单控件内容发生变化时就触发验证，默认提交时验证，
             // disabled和submitted代表当点击提交按钮时触发验证
 
             feedbackIcons: {  //显示表单验证结果的图标
                 valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                 validating: 'glyphicon glyphicon-refresh'
             },
             fields: {
                 phone_num: {
                     validators: {
                         regexp:{
                             regexp: /^1[3-9][\d]{9}$/,  //正则规则用两个/包裹起来
                             message: '请输入正确的手机号'
                         }
                     }
                 }
             }
         })
     })
 </script>

3.总结

以上为经常会用到的一些表单验证，若有不正确或需要补充的，欢迎指出。

想了解更多bootStrapValidator的更多验证，也可以进入 https://github.com/nghuuphuoc/bootstrapvalidator 下载源码学习研究。

posted @ 2019-06-16 18:22 Mr.Trees 阅读(3756) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

平凡之路

bootStrap表单验证插件的使用

bootStrapValidator插件的使用

1.插件的下载和引用

2.bootStrapValidator的常用验证

2.1 非空验证 notEmpty

2.2 数值验证 numeric

2.3 整数验证 digits

2.4 最大值和最小值验证 lessThan和greaterThan

2.5 数值范围验证 between

2.6 字符串长度验证 stringLength

2.7 邮箱地址验证 emailAddress

2.8 IP地址验证 ip

2.9 日期格式验证 date

2.10 正则验证 regexp

3.总结

公告