Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐） |
您所在的位置：网站首页 › 小红书照片尺寸变窄 › Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐） |
Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）
|
本文给大家介绍如何判断表单验证的实例代码，在没给大家介绍正文之前，先给大家介绍下插件。 插件介绍 先上一个图：
下载地址：https://github.com/nghuuphuoc/bootstrapvalidator 使用提示 中文化： 下载插件后，将\js\bootstrapValidator\language\zh_CN.js 引入文件，即实现中文化 提交前验证表单： 更丰富一点的表单验证例子：http://www.jq22.com/yanshi522，直接上代码： BootstrapValidator demo Sign up Full name Username Email address Password Retype password Gender Male Female Other Birthday (YYYY/MM/DD) Languages English French German Russian Other Programming Languages .Net Java C/C++ PHP Perl Ruby Python Javascript Sign up Sign up 2 Manual validate Reset form $(document).ready(function() { // Generate a simple captcha function randomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' ')); $('#defaultForm').bootstrapValidator({ // live: 'disabled', message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { firstName: { validators: { notEmpty: { message: 'The first name is required and cannot be empty' } } }, lastName: { validators: { notEmpty: { message: 'The last 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' }, regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: 'The username can only consist of alphabetical, number, dot and underscore' }, remote: { url: 'remote.php', message: 'The username is not available' }, different: { field: 'password', message: 'The username and password cannot be the same as each other' } } }, email: { validators: { emailAddress: { message: 'The input is not a valid email address' } } }, password: { validators: { notEmpty: { message: 'The password is required and cannot be empty' }, identical: { field: 'confirmPassword', message: 'The password and its confirm are not the same' }, different: { field: 'username', message: 'The password cannot be the same as username' } } }, confirmPassword: { validators: { notEmpty: { message: 'The confirm password is required and cannot be empty' }, identical: { field: 'password', message: 'The password and its confirm are not the same' }, different: { field: 'username', message: 'The password cannot be the same as username' } } }, birthday: { validators: { date: { format: 'YYYY/MM/DD', message: 'The birthday is not valid' } } }, gender: { validators: { notEmpty: { message: 'The gender is required' } } }, 'languages[]': { validators: { notEmpty: { message: 'Please specify at least one language you can speak' } } }, 'programs[]': { validators: { choice: { min: 2, max: 4, message: 'Please choose 2 - 4 programming languages you are good at' } } }, captcha: { validators: { callback: { message: 'Wrong answer', callback: function(value, validator) { var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[]) + parseInt(items[]); return value == sum; } } } } } }); // Validate the form manually $('#validateBtn').click(function() { $('#defaultForm').bootstrapValidator('validate'); }); $('#resetBtn').click(function() { $('#defaultForm').data('bootstrapValidator').resetForm(true); }); });看331行，点击提交时，用 $('#defaultForm').bootstrapValidator('validate');触发表单验证 下面是碰到的一个坑： bootstrapValidator默认逻辑是当表单验证失败时，把按钮给变灰色。 但是项目中，button并不在form内部，是通过事件绑定来ajax提交的。那么问题来了： 项目需要当form验证失败时，不执行所绑定的后续事件。百度半天找不到相关资料，最后还是要靠google： $("#yourform").submit(function(ev){ev.preventDefault();}); $("#submit").on("click", function(){ var bootstrapValidator = $("#yourform").data('bootstrapValidator'); bootstrapValidator.validate(); if(bootstrapValidator.isValid()) $("#yourform").submit(); else return; });以上所述是小编给大家介绍的Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 您可能感兴趣的文章:bootstrapValidator.min.js表单验证插件bootstrapValidator表单验证插件学习实用又漂亮的BootstrapValidator表单验证插件BootstrapValidator超详细教程(推荐)jquery插件bootstrapValidator数据验证详解bootstrapValidator bootstrap-select验证不可用的解决办法Bootstrapvalidator校验、校验清除重置的实现代码(推荐)BootstrapValidator实现注册校验和登录错误提示效果基于jQuery 实现bootstrapValidator下的全局验证Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解 |
【本文地址】