表单验证boostarpValidator

下载地址：http://bootstrapvalidator.votintsev.ru/getting-started/

1.首先需要引入

bootstrapValidator.css

jquery-2.1.0.min.js

bootstrap.min.js

bootstrapValidator.js

2.使用插件的条件：①需要使用完整的bootstartp的form结构，②必须有name属性，③ 必须用submit提交按钮

<!-- autocomplete="off"关闭表单的自动补全 -->
  <form class="form-horizontal col-sm-3" autocomplete="off">
        <div class="form-group">
            <label for="username" class="col-sm-3 control-label">用户名</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-3 control-label">密码</label>
            <div class="col-sm-9">
                <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-4">
                <button type="reset" class="btn btn-default">重置</button>
            </div>
            <div class="col-sm-3">
                <button type="submit" class="btn btn-primary">登录</button>
            </div>
    </form>

3.初始化,并进行校验

$('form').bootstrapValidator({
        // 默认的提示消息
        message: '默认的提示消息',
        // 表单框里右侧的icon 图标
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        //配置需要校验表单元素
        fields: {
            //根据name的值校验
            username: {
                message: '用户名验证失败',
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                    stringLength: {//长度限制
                        min: 2,
                        max: 6,
                        message: '用户名长度必须在2到6位之间'
                    },
                    regexp: { //正则表达式
                        regexp: /^[a-zA-Z0-9_]+$/,
                        message: '用户名只能包含大写、小写、数字和下划线'
                    },
		
                    callback:{//自定义校验
                        message:'用户名不存在'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    stringLength: {
                        min: 6,
                        max: 16,
                        message: '密码长度必须在6到16位之间'
                    },
                    callback:{
                        message:'密码错误'
                    }
                }
            }
        }
    }).on('success.form.bv', function (e) {
        //点击提交按钮获取表单数据进行ajax请求
        e.preventDefault();//阻止默认事件 防止自动提交******************   
        var $form = $(e.target);//得到当前的form对象
	   //进行后台数据请求
        $.ajax({
            url: '/employee/employeeLogin',
            type: 'post',
            data: $form.serialize(),
            dataType: 'json',
            success: function (data) {
                if(data.error===1000){
                    //用户名不存在
                    //需要设置当前用户名失败的状态，使用updateStatus('那个表单元素的name名','修改成什么状态','使用校验规则')
                    //校验状态：合法(VALID) 不合法(INVALID) 校验中(VALIDATING) 未校验(NOT_VALIDATE)
                    $form.data('bootstrapValidator').updateStatus('username','INVALID','callback')
                }else if(data.error===1001){
                    //密码错误
                    $form.data('bootstrapValidator').updateStatus('password','INVALID','callback')
                }else if(data.success){
                    location.href='./index.html';
                }
            }
        })
    })

表单校验使用需要注意的地方
①点击重置按钮 默认重置按钮只能清除表单内容，但是样式仍然停留在校验的状态

    $('[type="reset"]').on('click',function(){
        $('form').data('bootstrapValidator').resetForm();//重置样式
    })

②通过请求后台接口时，用户名以存在，通过校验设置当前用户名，使用

updateStatus('那个表单元素的name名','修改成什么校验状态','使用校验规则');

其中校验状态：合法(VALID) 不合法(INVALID) 校验中(VALIDATING) 未校验(NOT_VALIDATE)

以下是两种使用场景
1.通过请求后台接口时，用户名已存在，请求成功后可以使用自定义的校验规则

 $form.data('bootstrapValidator').updateStatus('username','INVALID','callback')

2.当自己的input框的内容由js或者jquery的方式填写时，需要手动更新状态

$('[name="categoryId"]').val($(this).attr('data-categoryId'));
//选择之后更新表单状态
$('#form').data('bootstrapValidator').updateStatus('categoryId','VALID','notEmpty');

③由于表单元素自动忽略了hidden disabled的元素，解决方式设置 excluded:[]

excluded:[]

④serialize()表单序列化只能获取表单元素

当表单中的元素不是input,但是serialize()获取数据，同时需要校验，如以下这是一个下拉列表

<div class="form-group">
      添加一级分类:
      <div class="dropdown" style="display: inline-block">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2"
              data-toggle="dropdown" >
              <span class="catetName">请选择</span>
              <span class="caret"></span>
          </button> 
		  <!-- 添加hidden的input标签为了表单系列化获取值，同时用来校验当前下拉列表 -->
          <input name="categoryId" type="hidden">
          <ul class="dropdown-menu">
              <li><a href="#" data-categoryId=1>分类一</a></li>
              <li><a href="#" data-categoryId=2>分类二</a></li>
          </ul>
      </div>
  </div>

解决方法：
1.添加一个input标签
2.由于该表单元素校验自动忽略了hidden disabled的元素，需要设置 excluded:[]

 $('form').bootstrapValidator({
        // 该表单元素自动忽略了hidden disabled的元素，解决方式设置 excluded:[]
        excluded:[]
 )}

3.进行相应的校验

categoryId:{
   message: '未添加一级分类',
    validators: {
        notEmpty: {
            message: '请选择一级分类'
        }
    }
}

4.由于我们需要手动设置input的值与bootstrap中下拉列表选择的值

//点击下拉列表的a标签设置选择的内容，同时设置我们添加的input的value值以便获取，其中data-categoryId为自定义属性

 $('.dropdown-menu').on('click','li a',function(){
        $('#dropdownMenu2 .catetName').text($(this).text());
        $('[name="categoryId"]').val($(this).attr('data-categoryId'));
        //选择之后更新表单状态
        $('#form').data('bootstrapValidator').updateStatus('categoryId','VALID','notEmpty');
  })

⑤当提交按钮没有包含在form表单中时

1.为form添加id属性 如
2.在button按钮上使用form属性来关联

 <!-- 使用form属性关联form -->
<button type="submit" form="form"class="btn btn-primary">确定</button>