bootstrap form使用笔记

表单验证无效可能的原因：

1. bootstrapValidator中fields的元素对应的是表单标签的name属性，而不是id
2. 如果按钮是普通button需要在点击事件加入$('#formID').data('bootstrapValidator').validate();

表单验证的其他问题：

1. 表单中使用bootstrap daterangepicker组件，即使选了日期也还是会被判断为空，需要加入监听事件

$('#datepicker').datetimepicker({
    .....
    }).on('changeDate', function (e) {
        $('#formSearch').bootstrapValidator('revalidateField', 'date');
});

2. 明明没有验证的字段却被验证了
   
   

   image.png
   
   因为这两个输入框在同一个
   ，修改为

    

        按时间
        

            
        
    
    

        按还款类型
        

            
                请选择
            
        
        

            查询
        
    

表单提交前的验证+验证通过提交

$('#form_data').bootstrapValidator({
            message: '这个值没有被验证',
            feedbackIcons: {
                //valid: 'glyphicon glyphicon-ok',
                //invalid: 'glyphicon glyphicon-remove',
                //validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                amount:{
                    validators:{
                        notEmpty: {message: '金额不能为空'},  
                        numeric: {message: '金额只能输入数字'}
                    }  
                },  
                copyWriter: {
                    message: '用户名还没有验证',
                    validators: {
                        stringLength: {
                            min: 0,
                            max: 10,
                            message: '长度最多10位'
                        }
                    }
                },
                Confirm: {
                    message: '密码重复还没有验证',
                    validators: {
                        notEmpty: {
                            message: '密码重复不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 16,
                            message: '密码长度在6到16之间'
                        },
                        identical: {
                            field: 'Password',
                            message: '两次密码不同请重新输入'
                        }
                    }
                }
            }
        }).on('success.form.bv', function (e) {
            // Prevent form submission
            e.preventDefault();
            // Get the form instance
            var $form = $(e.target);
            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');
            
            // Use Ajax to submit form data
            $.post("${ctx}/fee/update.shtml", $form.serialize(), function (data) {
                if ($.parseJSON(data)== "success") {
                    $('#editModal').modal('hide');
                    $('#OperatelistTable').bootstrapTable('refresh');
                    $('#feetable').bootstrapTable('refresh');
                }
                else {
                    alert(data);
                }
            });
        });