bootstrapvalidator.js的学习

一、引用

<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
<script type="text/javascript" src="../vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>

二、页面编写

<form id="defaultForm" class="form-horizontal">    
	<div class="form-group">        
		<label class="col-lg-3 control-label">Firstname</label>        
		<div class="col-lg-9">            
			<input type="text" class="form-control" name="firstname" />        
		</div>    
	</div>    
	<div class="form-group">        
		<label class="col-lg-3 control-label">Username</label>        
		<div class="col-lg-9">            
			<input type="text" class="form-control" name="username" />        
		</div>    
	</div>
</form>

三、添加验证

1.添加到HTML

<div class="form-group">
    <label class="col-lg-3 control-label">Username</label>
    <div class="col-lg-5">
        <input type="text" class="form-control" name="username" data-bv-message="The username is not valid" required
            data-bv-notempty-message="The username is required and cannot be empty"  pattern="[a-zA-Z0-9]+"
            data-bv-regexp-message="The username can only consist of alphabetical, number" />
    </div>
</div>

2.添加到JS

注：以下参数上面的赋值都为默认值，不添加该参数即使用默认值

<script type="text/javascript">
$(document).ready(function() {
    $('#defaultForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            firstName: {
                container: '#firstNameMessage',
                validators: {
                    notEmpty: {
                        message: 'The first name is required and cannot be empty'
                    }
                }
            },
            username: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and cannot be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    }
                }
            }
        }
    });
});
</script>

四、自定义验证规则

自定义验证规则可直接添加bootstrapvalitor.js末尾

(function($) {
    $.fn.bootstrapValidator.i18n.base64 = $.extend($.fn.bootstrapValidator.i18n.base64 || {}, {
        'default': 'Please enter a valid base 64 encoded'
    });


    $.fn.bootstrapValidator.validators.base64 = {
        /**
         * Return true if the input value is a base 64 encoded string.
         *
         * @param {BootstrapValidator} validator The validator plugin instance
         * @param {jQuery} $field Field element
         * @param {Object} options Can consist of the following keys:
         * - message: The invalid message
         * @returns {Boolean}
         */
        validate: function(validator, $field, options) {
            var value = $field.val();
            if (value === '') {
                return true;
            }


            return /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{4})$/.test(value);
        }
    };
}(window.jQuery));

页面引用：data-bv-base64 data-bv-base64-message="提示内容！"