表单验证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提交按钮

  

        

            用户名
            

                
            
        
        

            密码
            

                
            
        
        

            

                重置
            
            

                登录
            
    

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()获取数据，同时需要校验，如以下这是一个下拉列表

      添加一级分类:
      

          
              请选择
              
           
		  
          
          

              
分类一
              
分类二
          
      
  

解决方法：
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属性来关联

 
确定