Bootstrap之bootstrapvalidator字段验证（一行多控件字段显示）

在引入jQuery和Bootstrap的前提下引入bootstrapvalidator文件 ，我用的Bootcdn。

<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

<link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">

 

HTML代码：

<form id="addForm" method="post" class="form-horizontal" action="">
        <fieldset>
            <legend style="text-align: left;">基础资料</legend>
            <div class="form-group col-sm-4">
                <label class="col-sm-3 control-label" for="name">姓名</label>
                <div class="col-sm-9">
                    <input class="form-control" id="name" name="name" type="text" placeholder=""/>
                </div>
            </div>
            <div class="form-group col-sm-4">
                <label class="col-sm-3 control-label" for="sex">性别</label>
                <div class="col-sm-9">
                    <select id="sex" name="sex" class="form-control">
                        <option>男</option>
                        <option>女</option>
                    </select>
                </div>
            </div>
            <div class="form-group col-sm-4">
                <label class="col-sm-3 control-label" for="birthday">出生年月</label>
                <div class="col-sm-9">
                    <input type="text" id="birthday" name="birthday" class="form-control datepicker" placeholder="请选择日期" />
                </div>
            </div>
        </fieldset>
        <fieldset>
            <div class="form-group col-sm-4">
                <label class="col-sm-3 control-label" for="nation">民族</label>
                <div class="col-sm-9">
                    <input class="form-control" id="nation" name="nation" type="text" placeholder=""/>
                </div>
            </div>
            <div class="form-group col-sm-4">
                <label class="col-sm-3 control-label" for="nativePlace">籍贯</label>
                <div class="col-sm-9">
                    <input class="form-control" id="nativePlace" name="nativePlace" type="text" placeholder=""/>
                </div>
            </div>
            <div class="form-group col-sm-4">
                <label class="col-sm-3 control-label" for="birthplace">出生地</label>
                <div class="col-sm-9">
                    <input class="form-control" id="birthplace" name="birthplace" type="text" placeholder=""/>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <div class="form-group col-sm-4">
                <label class="col-sm-3 control-label" for="joinPartyDate">入党时间</label>
                <div class="col-sm-9">
                    <input type="text" id="joinPartyDate" name="joinPartyDate" class="form-control datepicker" placeholder="请选择日期" />
                </div>
            </div>
            <div class="form-group col-sm-4">
                <label class="col-sm-3 control-label" for="workedDate">参加工作时间</label>
                <div class="col-sm-9">
                    <input type="text" id="workedDate" name="workedDate" class="form-control datepicker" placeholder="请选择日期" />
                </div>
            </div>
            <div class="form-group col-sm-4">
                <label class="col-sm-3 control-label" for="health">健康状况</label>
                <div class="col-sm-9">
                    <input class="form-control" id="health" name="health" type="text" placeholder=""/>
                </div>
            </div>
        </fieldset>
        <fieldset>
            <div class="form-group col-sm-6">
                <label class="col-sm-2 control-label" for="technicalPosition">专业技术之职务</label>
                <div class="col-sm-10">
                    <input type="text" id="technicalPosition" name="technicalPosition" class="form-control" placeholder="" />
                </div>
            </div>
            <div class="form-group col-sm-6">
                <label class="col-sm-2 control-label" for="major">熟悉专业何种特长</label>
                <div class="col-sm-10">
                    <input type="text" id="major" name="major" class="form-control" placeholder="" />
                </div>
            </div>
        </fieldset>
</form>

 一个<fieldset>代表一行，bootstrap采用栅格布局，所以class为col-sm-6代表占一行6份，col-sm-1则是代表占一行1份，一行总共是12份。一个<div class="form-group">代表一个字段，因为在bootstrapvalidator验证过后是通过添加div class来显示效果的。

js:

//增加页面表单验证规则
$(document).ready(function () {
   $("#addForm").bootstrapValidator({
      feedbackIcons: {
         valid: 'glyphicon glyphicon-ok',
         invalid: 'glyphicon glyphicon-remove',
         validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
         name: {
            message: '姓名称验证失败',
            validators: {
               notEmpty: {
                  message: '姓名不能为空'
               },
               stringLength: {
                  max: 10,
                  message: '姓名长度不能超过10位'
               }
            }
         },
         birthday: {
            message: '出生年月验证失败',
            validators: {
               stringLength: {
                  max: 10,
                  message: '出生年月长度不能超过10位'
               }
            }
         },
         nation: {
            message: '民族验证失败',
            validators: {
               stringLength: {
                  max: 10,
                  message: '民族长度不能超过10位'
               }
            }
         },
         //其余字段省略。。。。。。。
      }
   });

 

validators验证书写规则：
                        validators: {
                            notEmpty: {
                                message: '文本框必须输入'
                            },
                            stringLength: {//检测长度
                                min: 5,
                                max: 10,
                                message: '长度必须在5-10之间'
                            },
                            regexp: {//正则验证
                                regexp: /^[a-z]/,
                                message: ''
                            },
                            remote: {//将内容发送至指定页面验证，返回验证结果，比如查询用户名是否存在
                                url: '指定页面',
                                message: ''
                            },
                            different: {//与指定文本框比较内容相同
                                field: '指定文本框name',
                                message: '不能与指定文本框内容相同'
                            },
                            emailAddress: {//验证email地址
                                message: '不是正确的email地址'
                            },
                            identical: {//与指定控件内容比较是否相同，比如两次密码不一致
                                field: 'confirmPassword',//指定控件name
                                message: '输入的内容不一致'
                            },
                            date: {//验证指定的日期格式
                                format: 'YYYY/MM/DD',
                                message: '日期格式不正确'
                            },
                            choice: {//check控件选择的数量
                                min: 2,
                                max: 4,
                                message: '必须选择2-4个选项'
                            }

                      }

提交验证：

//提交表单
$("#btn_save").click(function () {

   $('#addForm').data("bootstrapValidator").validate();

   var isValid = $('#addForm').data("bootstrapValidator").isValid();

   if(isValid) {
      // 验证成功、上传表单数据。。。
      
   } else {
      alert("验证失败，请检查字段")
      return;
   }
})

参考：https://blog.csdn.net/jewely/article/details/77810472

~不喜欢篮球的摄影师不是一个好程序员~