bootstrapvalidator之API学习

原创 2016年05月31日 03:33:45

最近项目用到了bootstrap框架,其中前端用的校验,采用的是bootstrapvalidator插件,也是非常强大的一款插件。我这里用的是0.5.2版本。
下面记录一下使用中学习到的相关API,不定期更新。


1. 获取validator对象或实例
一般使用校验是直接调用$(form).bootstrapValidator(options)来初始化validator。初始化后有两种方式获取validator对象或实例,可以用来调用其对象的方法,比如调用resetForm来重置表单。有两种方式获取:
1)

// Get plugin instance
var bootstrapValidator = $(form).data('bootstrapValidator');
// and then call method
bootstrapValidator.methodName(parameters)
这种方式获取的是BootstrapValidator的实例,可以直接调用其方法。
2)
$(form).bootstrapValidator(methodName, parameters);

这种方式获取的是代表当前form的jquery对象,调用方式是将方法名和参数分别传入到bootstrapValidator方法中,可以链式调用。
两种方式的使用分别如下:

// The first way
$(form)
    .data('bootstrapValidator')
    .updateStatus('birthday', 'NOT_VALIDATED')
    .validateField('birthday');

// The second one
$(form)
    .bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')
    .bootstrapValidator('validateField', 'birthday');

2. defaultSubmit()
使用默认的提交方式提交表单,调用此方法BootstrapValidator将不执行任何的校验。一般需要时可以放在validator校验的submitHandler属性里调用。
使用:

$('#defaultForm').bootstrapValidator({
	fields: {
	    username: {
		message: 'The username is not valid',
		validators: {
		    notEmpty: {
			message: 'The username is required and can\'t be empty'
		    }
		}
	    }
	},
	submitHandler: function(validator, form, submitButton) {
	    // a)
	    // Use Ajax to submit form data
	    //$.post(form.attr('action'), form.serialize(), function(result) {
		// ... process the result ...
	    //}, 'json');

	    //b)
	    // Do your task
	    // ...
	    // Submit the form
	    validator.defaultSubmit();
	}
});

3. disableSubmitButtons(boolean)
启用或禁用提交按钮。BootstrapValidator里默认的提交按钮是所有表单内的type属性值为submit的按钮,即[type="submit"]。
使用:
当登录失败时,重新启用提交按钮。

$('#loginForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        submitHandler: function(validator, form, submitButton) {
            $.post(form.attr('action'), form.serialize(), function(result) {
                // The result is a JSON formatted by your back-end
                // I assume the format is as following:
                //  {
                //      valid: true,          // false if the account is not found
                //      username: 'Username', // null if the account is not found
                //  }
                if (result.valid == true || result.valid == 'true') {
                    // You can reload the current location
                    window.location.reload();

                    // Or use Javascript to update your page, such as showing the account name
                    // $('#welcome').html('Hello ' + result.username);
                } else {
                    // The account is not found
                    // Show the errors
                    $('#errors').html('The account is not found').removeClass('hide');

                    // Enable the submit buttons
                    $('#loginForm').bootstrapValidator('disableSubmitButtons', false);
                }
            }, 'json');
        },
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    }
                }
            }
        }
    });

4. enableFieldValidators(field, enabled)
启用或禁用指定字段的所有校验。这里我的实

验结果是如果禁用了校验,好像对应的字段输入(文本框、下拉等)也会变为禁用。
使用:
当密码框不为空时,开启密码框和确认密码框的校验:

// Enable the password/confirm password validators if the password is not empty
    $('#signupForm').find('[name="password"]').on('keyup', function() {
        var isEmpty = $(this).val() == '';
        $('#signupForm').bootstrapValidator('enableFieldValidators', 'password', !isEmpty)
                        .bootstrapValidator('enableFieldValidators', 'confirm_password', !isEmpty);
        if ($(this).val().length == 1) {
            $('#signupForm').bootstrapValidator('validateField', 'password')
                            .bootstrapValidator('validateField', 'confirm_password');
        }
    });


5. getFieldElements(field)根据指定的name获取指定的元素,返回值是null或一个jquery对象数组。 

 6. isValid()返回当前需要验证的所有字段是否都合法。调用此方法前需先调用validate来进行验证,validate方法可用在需要点击按钮或者链接而非提交对表单进行校验的时候。使用:点击某按钮时,提示所有字段是否通过校验。

$("#isAllValid").on("click", function(){
	alert($("#defaultForm").data('bootstrapValidator').isValid());
});

7. resetForm(Boolean)
重置表单中设置过校验的内容,将隐藏所有错误提示和图标。
使用:

$("#isAllValid").on("click", function(){
	alert($("#defaultForm").data('bootstrapValidator').isValid());
	if(!$("#defaultForm").data('bootstrapValidator').isValid()) {
		$("#defaultForm").data('bootstrapValidator').resetForm();
	}
});

8. updateElementStatus($field, status, validatorName)
更新元素状态。status的值有:NOT_VALIDATED, VALIDATING, INVALID or VALID。


9. updateStatus(field, status, validatorName)
更新指定的字段状态。BootstrapValidator默认在校验某个字段合法后不再重新校验,当调用其他插件或者方法可能会改变字段值时,需要重新对该字段进行校验。
使用:

点击按钮对文本框进行赋值,并对其重新校验:

$('#defaultForm').bootstrapValidator({
	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'
	    }
	}
});

$("#setname").on("click", function(){
	$("input[name=username]").val('san');
	var bootstrapValidator = $("#defaultForm").data('bootstrapValidator');
	bootstrapValidator.updateStatus('username', 'NOT_VALIDATED').validateField('username'); //错误提示信息变了
});

10. validate()
手动对表单进行校验,validate方法可用在需要点击按钮或者链接而非提交对表单进行校验的时候。
由第一条可知,调用方式同样有两种:

$(form).bootstrapValidator(options).bootstrapValidator('validate');

// or
$(form).bootstrapValidator(options);
$(form).data('bootstrapValidator').validate();

11. validateField(field)
对指定的字段进行校验。

相关文章推荐

bootstrap 组件学习之bootstrap validator

bootstrap 组件学习之bootstrap validator 1.项目目录 1. 源码和api地址 bootstrapvalidator源码:https://github...
  • zh4000
  • zh4000
  • 2016年11月18日 23:24
  • 2303

BootstrapValidator超详细教程

废话不多说,直接开始~一、引入必要文件下载地址:(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)...

jQuery formvalidator插件 API帮助文档

jQuery formvalidator插件 API帮助文档 目前支持4种大的校验方式,分别是:InputValidator(针对input、 textarea、select控件)、...

BootstrapValidator 的使用

bootstrap 组件学习之bootstrap validator 1.项目目录 1. 源码和api地址 bootstrapvalidator源码:https://github.c...
  • zh4000
  • zh4000
  • 2016年11月18日 22:08
  • 2209

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

bootstrap validator 使用笔记

最近做的项目,前台使用的bootstrap框架。对于前台框架来说,验证是必不可少的。对于常用的一些校验规则,如果有一个例子会更好的。虽然有提供validator的API,但是感觉不太好用。所以记录一下...

表单验证之BootstrapValidator

Bootstrap Validator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站。...
  • sqq0103
  • sqq0103
  • 2016年12月14日 23:32
  • 2177

Form表单验证神器: BootstrapValidator

JS组件系列——Form表单验证神器: BootstrapValidator 时间 2015-12-10 17:10:00  博客园精华区 原文  http://www.cnblogs.com/la...
  • wuhouz
  • wuhouz
  • 2016年07月06日 14:45
  • 1721

bootstrapValidator.js,最好用的bootstrap表单验证插件

本篇推荐一款twitter做的bootstrapValidator.js(最好用的bootstrap表单验证插件,没有之一),本身bootstrap就是twitter做的,那么使用原配的validat...
  • qing_gee
  • qing_gee
  • 2015年10月13日 17:50
  • 46023

bootstrapvalidator使用时需要注意的事项

如果你使用的前端框架是bootstrap,那么前端验证框架就bubi [bubi]
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrapvalidator之API学习
举报原因:
原因补充:

(最多只允许输入30个字)