您的位置:首页 > Web前端 > BootStrap

BootstrapValidator.js 插件针对表单的验证

2017-10-12 15:24 507 查看

BootstrapValidator.js 的使用

相信引用过boostrap的程序猿都知道:Bootstrap下的表单本身不带验证功能的。这就导致了这一类的插件很多,然而,作为程序猿,都不想引入太多的不同插件,毕竟插件用过了对网页的加载时有很大的影响的。但是作为bootstrap中的员,BootstrapValidator.js插件就不显得那么的被大家所排斥了,要知道它的封装的验证功能比easyui的还要强大。

对于如何的使用BootstrapValidator.js ,我就不过多的介绍了…

下载地址: https://github.com/nghuuphuoc/bootstrapvalidator

#####使用方式,引入 bootstrapValidator.min.css 和 bootstrapValidator.min.js

#####这两个文件,然后初始化表单

Bootstrapvalidator下载的代码中有大量的demo,可以根据需要自己选择查看。

比较有兴趣的就是如何来自定义验证表单的规则问题

这就涉及到改插件中的validators方法,代码如下:

$(function($) {
//自定义表单验证规则
$.fn.bootstrapValidator.validators = {
<validatorName> : {
/**
* @param {BootstrapValidator} 表单验证实例对象
* @param {jQuery} $field jQuery 对象
* @param {Object} 表单验证配置项值
* @returns {boolean}
*/
validate: function(validator, $field, options) {
// 表单输入的值
// var value = $field.val();

//options为<validatorOptions>对象,直接.获取需要的值

// 返回true/false
//也可返回{ valid : true/false, message: 'XXXX'}
return reg.test( $field.val() );

}
},
};
});


其中的使用方法我也就不这里说啦,直接通过文档更好的了解这个插件的使用,本人放在这也是为了日后更容易找到。。。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  bootstrap 插件 表单