BootStrap 是一个强大的前面框架，它用优雅的方式解决了网页问题。最近正在使用其开发网站的表单验证，一点体会记录如下：
注：本文中借鉴了博客Franson 的文章使用bootstrap validator的remote验证代码经验分享(推荐)
一、准备工作
2.下载BootStrap Validator相关材料，地址：
当然，如果你不想一个一个下载到您的项目中的话，可以引入CDN，CDN可以用bootstrap官方的，也可以百度上搜索下“BootStrap CDN”，你一定可以理解是怎么使用。下面是我的引入代码：
<!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- Bootstrap Validator JS文件 --> <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script> <!-- Bootstrap Validator 样式文件 --> <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css"> <!-- Bootstrap Validator 中文语言包 --> <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/language/zh_CN.min.js"></script>
二、初步应用。
这里直接引用BootStrap Validator 官方的例子，先看HTML代码：
<form> <div> <label>Username</label> <div> <input type="text" /> </div> </div> <div> <label>Email address</label> <div> <input type="text" /> </div> </div> </form>
一段很普通的BootStrap网页代码，一个表单，里面是用户名，邮箱地址二个INPUT
BootStrap验证是根据表单控件的name值进行检验的，下面是JS代码：
<script> $(document).ready(function() { $('.registerForm').bootstrapValidator({ message: 'This value is not valid', //验证错误时的信息 feedbackIcons: { //验证时显示的图标 valid: 'glyphicon glyphicon-ok', //正确图标 invalid: 'glyphicon glyphicon-remove', //错误图标 validating: 'glyphicon glyphicon-refresh' //正在更新图标 }, fields: { //要验证哪些字段 username: { //与表单里input的name属性对应 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 and underscore' //验证错误时的信息， } } }, email: { validators: { notEmpty: { message: 'The email is required and cannot be empty' }, emailAddress: { //是不是正确的email格式 message: 'The input is not a valid email address' } } } } }); }); </script>
BootStrap Validator 已经定义好很多验证方式，每一种方式的用法参见：
其中几个常用的，提一下，其实一看就懂，很好理解：
三、进阶应用
如果不想用默认的模板，可以使用以下个方式来进行一些自定义验证
callback方式可以让您自定义函数用于判断，下面看个例子
HTML(内容就是显示输入运算结果)
<form> <div> <label></label> <div> <input type="text" /> </div> </div> </form>
来看看JS
<script> $(document).ready(function() { // 随机取min,max中间的一个数 function randomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; // 生成随机两个数相加的文字显示内容，显示到capchaOperation中去 $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' ')); $('#captchaForm').bootstrapValidator({ //验证 feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { captcha: { validators: { callback: { //callback方式 message: 'Wrong answer', callback: function(value, validator) { //您可以在这里实现自定义功能 // Determine the numbers which are generated in captchaOperation //这里面value就是input里输入的值 var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]); return value == sum; } } } } } }); }); </script>