bootstrapvalidator 验证框架

bootstrapvalidator 验证框架

https://github.com/nghuuphuoc/bootstrapvalidator/

1、resetForm

$('#resetBtn').click(function() {
        $('#defaultForm').data('bootstrapValidator').resetForm(true);
    });

 

 2、属性校验

 

<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 and digits"
                                   data-bv-stringlength="true" data-bv-stringlength-min="6" data-bv-stringlength-max="30" data-bv-stringlength-message="The username must be more than 6 and less than 30 characters long"
                                   data-bv-different="true" data-bv-different-field="password" data-bv-different-message="The username and password cannot be the same as each other"
                                   data-bv-remote="true" data-bv-remote-url="remote.php" data-bv-remote-message="The username is not available"
                                    />

 

$(document).ready(function() {
        $('#defaultForm').bootstrapValidator();
    });

 3、Ajax提交

 

 

$(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: {
                username: {
                    message: 'The username is not valid',
                    validators: {
                        notEmpty: {
                            message: 'The username is required and can\'t be empty'
                        },
                        stringLength: {/*长度校验*/
                            min: 6,
                            max: 30,
                            message: 'The username must be more than 6 and less than 30 characters long'
                        },
                        regexp: {/*正则校验*/
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: 'The username can only consist of alphabetical, number, dot and underscore'
                        }
                    }
                }
            }
        })
        .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');
			//Ajax 提交
            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {
                console.log(result);
            }, 'json');
        });
});

 4、choice

 

 

 <form id="interviewForm" method="post" class="form-horizontal" action="target.php">
	<div class="form-group">
		<label class="col-lg-3 control-label">Programming Languages</label>
		<div class="col-lg-4">
			<div class="checkbox">
				<label>
					<input type="checkbox" name="languages[]" value="net" /> .Net
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox" name="languages[]" value="java" /> Java
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox" name="languages[]" value="c" /> C/C++
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox" name="languages[]" value="php" /> PHP
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox" name="languages[]" value="perl" /> Perl
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox" name="languages[]" value="ruby" /> Ruby
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox" name="languages[]" value="python" /> Python
				</label>
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox" name="languages[]" value="javascript" /> Javascript
				</label>
			</div>
		</div>
	</div>
</form>

 

$(document).ready(function() {
    $('#interviewForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            'languages[]': {
                validators: {
                    choice: {
                        min: 2,
                        max: 4,
                        message: 'Please choose %s - %s programming languages you are good at'
                    }
                }
            }
        }
    });
});

 5、不同的错误提示方式

 

1. container: 'tooltip',
2. container: '#errors',
3. .on('error.field.bv'、.on('success.field.bv',、.on('success.form.bv' 事件

 

$(document).ready(function() {
    $('#defaultForm').bootstrapValidator({
        message: 'This value is not valid',
        container: 'tooltip',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
           
            password: {
                container: 'popover',
                validators: {
                    notEmpty: {
                        message: 'The password is required and cannot be empty'
                    },
                    different: {
                        field: 'username',
                        message: 'The password cannot be the same as username'
                    }
                }
            }
        }
    })
	.on('error.field.bv', function(e, data) {
            var messages = data.bv.getMessages(data.field);
            $('#errors').find('li[data-bv-for="' + data.field + '"]').remove();
            for (var i in messages) {
                $('<li/>').attr('data-bv-for', data.field).html(messages[i]).appendTo('#errors');
            }
            $('#errors').parents('.form-group').removeClass('hide');
        })
        .on('success.field.bv', function(e, data) {
            $('#errors').find('li[data-bv-for="' + data.field + '"]').remove();
        })
        .on('success.form.bv', function(e) {
            $('#errors')
                .html('')
                .parents('.form-group').addClass('hide');
        });
});