编程 Javascript

Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

Posted in Javascript onJune 21, 2016

本文给大家介绍如何判断表单验证的实例代码，在没给大家介绍正文之前，先给大家介绍下插件。

插件介绍

先上一个图：

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

使用提示

中文化：

下载插件后，将\js\bootstrapValidator\language\zh_CN.js 引入文件，即实现中文化

提交前验证表单：

更丰富一点的表单验证例子：http://www.jq22.com/yanshi522，直接上代码：

<!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator demo</title>
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="dist/css/bootstrapValidator.css"/>
<!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/../css/font-awesome.css" />-->
<script type="text/javascript" src="vendor/jquery/jquery-...min.js"></script>
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!-- form: -->
<section>
<div class="col-lg- col-lg-offset-">
<div class="page-header">
<h>Sign up</h>
</div>
<form id="defaultForm" method="post" class="form-horizontal" action="target.php">
<div class="form-group">
<label class="col-lg- control-label">Full name</label>
<div class="col-lg-">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-lg-">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Username</label>
<div class="col-lg-">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Email address</label>
<div class="col-lg-">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Password</label>
<div class="col-lg-">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Retype password</label>
<div class="col-lg-">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Gender</label>
<div class="col-lg-">
<div class="radio">
<label>
<input type="radio" name="gender" value="male" /> Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" /> Female
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Birthday</label>
<div class="col-lg-">
<input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD)
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Languages</label>
<div class="col-lg-">
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="english" /> English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="french" /> French
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="german" /> German
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="russian" /> Russian
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg- control-label">Programming Languages</label>
<div class="col-lg-">
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="net" /> .Net
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="java" /> Java
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="c" /> C/C++
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="php" /> PHP
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="perl" /> Perl
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="ruby" /> Ruby
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="python" /> Python
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="programs[]" value="javascript" /> Javascript
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label" id="captchaOperation"></label>
<div class="col-lg-2">
<input type="text" class="form-control" name="captcha" />
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
<button type="submit" class="btn btn-primary" name="signup2" value="Sign up 2">Sign up 2</button>
<button type="button" class="btn btn-info" id="validateBtn">Manual validate</button>
<button type="button" class="btn btn-info" id="resetBtn">Reset form</button>
</div>
</div>
</form>
</div>
</section>
<!-- :form -->
</div>
</div>
<script type="text/javascript">
$(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);
});
});
</script>
</body>
</html>

看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使用方法整理（推荐）的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐）

- Author -

WoodK

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript基本概念初级讲解论坛贴的学习记录

Feb 22 Javascript

现如今最流行的JavaScript代码规范

Mar 08 Javascript

jQuery中prevUntil()方法用法实例

Jan 08 Javascript

jQuery中innerHeight()方法用法实例

Jan 19 Javascript

浅谈javascript中this在事件中的应用

Feb 15 Javascript

跟我学习javascript的函数调用和构造函数调用

Nov 16 Javascript

javascript图片预加载完整实例

Dec 10 Javascript

Bootstrap基本插件学习笔记之Tooltip提示工具(18)

Dec 08 Javascript

在微信小程序中渲染HTML内容的方法示例

Sep 28 Javascript

如何使用less实现随机下雪动画详解

Jan 02 Javascript

vue使用codemirror的两种用法

Aug 27 Javascript

解决VUE双向绑定失效的问题

Oct 29 Javascript

关于JS中setTimeout()无法调用带参函数问题的解决方法

Jun 21 #Javascript

原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)

Jun 21 #Javascript

jQuery动态添加可拖动元素完整实例(附demo源码下载)

Jun 21 #Javascript

带有定位当前位置的百度地图前端web api实例代码

Jun 21 #Javascript

jQuery中的ready函数与window.onload谁先执行

Jun 21 #Javascript

纯JS前端实现分页代码

Jun 21 #Javascript

jQuery AJAX timeout 超时问题详解

Jun 21 #Javascript