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、不同的错误提示方式
- container: 'tooltip',
- container: '#errors',
- .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'); }); });
相关推荐
和bootstrap配合得相当好的基于jquery的验证框架,内含源码及文档以及压缩后的js文件
做输入校验的时候如果你前端框架用的是bootstrap的话,首推bootstrapValidator校验方式,具体流程如下: 一、下载,导入js文件 <link type="text/css" rel="stylesheet" href="${ctx}/components/validate/css/...
BootstrapValidator - 从下一个 v0.6.0 版本开始,该插件支持多种框架(Bootstrap、Foundation、Semantic UI、UIKit)。 它将重命名为FormValidation 。 升级指南将在 v0.6.0 发布时提供。 - 用于验证表单字段的...
在AdminEAP框架中,使用了BootstrapValidator校验框架,本文以注册校验的用户名、登录名、密码、确认密码的校验(后面还有时间区间、服务器校验)为例,讲述BootstrapValidator的使用。同时以登录错误提示为例,说明...
Bootstrap Validator是为Bootstrap3设计的一款表单验证jQuery插件,非常适合基于Bootstrap框架的网站。 看作者的github,这款插件已经不再更新了,而推荐使用FormValidation,不过现在还是先介绍一下Bootstrap...
Bootstrap是现在非常流行的一款前端框架,这篇来介绍一款基于Bootstrap的验证插件BootstrapValidator。 先来看一下效果图(样式是不是还不错O(∩_∩)O哈哈~)。 Bootstrapvalidator下载地址:...
BootstrapValidator是基于bootstrap3的jquery表单验证插件,是最适合bootstrap框架的表单验证插件,在工作中用到此框架就写下自己在使用中积累的一些心得 二、问题描述 当按钮的类型为submit时,使用bootstrap...
因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说。 bootstrap:能够增加兼容性的强大框架. 需要引用css: bootstrap.min.css bootstrapValidator.min.css js: jquery-1.10.2....
最近项目用到了bootstrap框架,其中前端用的校验,采用的是bootstrapvalidator插件,也是非常强大的一款插件。我这里用的是0.5.2版本。 下面记录一下使用中学习到的相关API,不定期更新。 1. 获取validator对象或...
如果你使用的前端框架是bootstrap,那么前端验证框架就不必考虑了,bootstrapvalidator是最好的选择,它和bootstrap的结合最完美,不过要注意版本的问题,针对bootstrap2和bootstrap3有不同的版本。 下面是我遇到的...
因为项目需要数据验证,看bootstrapValidator 还不错,就上手一直,完美兼容,话不多说。 bootstrapValidator的github地址 需要引用css: bootstrap.min.css bootstrapValidator.min.css js: jQuery-1.10.2.min.js ...
这是一个前端验证框架。
做Web开发的我们,表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。今天就来看看bootstrapvalidator如何使用,感兴趣的小伙伴们可以参考一下
BootStrap 是一个强大的前面框架,它用优雅的方式解决了网页问题。最近正在使用其开发网站的表单验证,一点体会记录如下: 注:本文中借鉴了博客Franson 的文章使用bootstrap validator的remote验证代码经验分享...
已经测试通过ie6+,ff,google等浏览器,使用比较建议,缺陷可能ajax验证的方式没有很强大,只适用简单的ajax验证,equals比较器尚有漏洞,所以请大家共同改进下这个框架,让我们的开发的时候验证表单更简单点,因为其他的很...
框架使用场景:OA、ERP...•服务端验证:实体模型验证、自己封装Validator •缓存框架:微软自带Cache、Redis •日志管理:Log4net、登录日志、操作日志 •工具类:NPOI、Newtonsoft.Json、验证码、丰富公共类似
1、前端技术 ...服务端验证:实体模型验证、自己封装Validator 缓存框架:微软自带Cache、Redis 日志管理:Log4net、登录日志、操作日志 工具类:NPOI、Newtonsoft.Json、验证码、丰富公共类似