BootstrapValidator不触发校验的实现代码

BootstrapValidator是一个基于Bootstrap的jQuery表单验证插件，可以方便地在页面中对表单进行校验。有时候需要手动控制校验，在一些特定的场景中，需要用户触发校验的时候才进行校验，那么在这种情况下，我们应该如何实现呢？

以下是实现“BootstrapValidator不触发校验”的完整攻略：

1. 关闭自动校验

首先，需要将BootstrapValidator的自动校验关闭。这可以通过设置autoValidate选项为false来实现，如下：

$('#formId').bootstrapValidator({
    autoValidate: false,
    // 其他校验参数设置
    // ...
});

这样设置之后，BootstrapValidator将不会自动校验表单。

2. 手动控制校验

接着，在需要校验的时候，可以手动调用validate方法来触发校验。这个方法可以单独对某个字段进行校验，也可以对整个表单进行校验。

// 对整个表单进行校验
$('#formId').bootstrapValidator('validate');

// 对某个字段进行校验
$('#formId').bootstrapValidator('updateStatus', 'fieldName', 'NOT_VALIDATED')
             .bootstrapValidator('validateField', 'fieldName');

具体来说，updateStatus方法用来更新字段的校验状态，validateField方法用来对某个字段进行校验，它需要传入对应字段的名称。

以下是示例说明：

示例 1：按钮触发校验

点击提交按钮时触发校验，如果校验通过，就提交表单。

HTML代码：

<form id="formId" action="#" method="post">
    <div class="form-group">
        <input type="text" name="name" class="form-control" placeholder="Name">
    </div>
    <div class="form-group">
        <input type="email" name="email" class="form-control" placeholder="Email">
    </div>
    <button type="button" class="btn btn-default" id="submitBtn">Submit</button>
</form>

JavaScript代码：

$(function() {
    $('#formId').bootstrapValidator({
        autoValidate: false,
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: 'The Name field is required'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The Email field is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            }
        }
    });

    $('#submitBtn').click(function() {
        // 手动触发校验
        $('#formId').bootstrapValidator('validate');
        if ($('#formId').data('bootstrapValidator').isValid()) {
            // 校验通过，提交表单
            $('#formId').submit();
        } else {
            // 校验不通过，不提交表单
            alert('Please input correct information');
        }
    });
});

示例 2：输入框焦点离开时触发校验

当焦点离开输入框时，自动校验该输入框，校验结果在输入框下方显示。

HTML代码：

<form id="formId" action="#" method="post">
    <div class="form-group">
        <label>Name:</label>
        <input type="text" name="name" class="form-control" placeholder="Name">
    </div>
    <div class="form-group">
        <label>Email:</label>
        <input type="email" name="email" class="form-control" placeholder="Email">
    </div>
</form>

JavaScript代码：

$(function() {
    $('#formId').bootstrapValidator({
        autoValidate: false,
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: 'The Name field is required'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The Email field is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            }
        }
    });

    // 输入框焦点离开自动进行校验
    $('form :input').blur(function() {
        // 手动触发校验并更新校验状态
        $(this).closest('form').bootstrapValidator('updateStatus', $(this).attr('name'), 'NOT_VALIDATED')
               .bootstrapValidator('validateField', $(this).attr('name'));
    });
});

以上两个示例分别演示了点击按钮和输入框焦点离开时如何手动触发校验，可以针对具体的业务场景进行调整。