源码及API地址

bootstrap validator源码：https://github.com/nghuuphuoc/bootstrapvalidator
bootstrap validator API：http://bv.doc.javake.cn/api/

基本使用

1.引用js组件

<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
<link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />

2.页面编写
我们知道，既然是表单验证，那么我们在cshtml页面就必须要有一个Form，并且我们知道Form里面取元素都是通过name属性去取值的，所以，表单里面的元素都要有一个name的属性值。

<form>
	<div class="form-group">
    	<label>Username</label>
    	<input type="text" class="form-control" name="username" />
	</div>
	<div class="form-group">
		<label>Email address</label>
		<input type="text" class="form-control" name="email" />
	</div>
	<div class="form-group">
		 <button type="submit" name="submit" class="btn btn-primary">Submit</button>
	</div>
</form>

3.js初始化

 $(function () {
	$('form').bootstrapValidator({
		message: 'This value is not valid',
		feedbackIcons: {
			valid: 'glyphicon glyphicon-ok',
			invalid: 'glyphicon glyphicon-remove',
			validating: 'glyphicon glyphicon-refresh'
		},
		fields: {
			username: {
				message: '用户名验证失败',
				validators: {
					notEmpty: {
						message: '用户名不能为空'
					},
					stringLength: {
						min: 6,
						max: 18,
						message: '用户名长度必须在6到18位之间'
					},
					regexp: {
						regexp: /^[a-zA-Z0-9_]+$/,
						message: '用户名只能包含大写、小写、数字和下划线'
					}
				}
			},
			email: {
				validators: {
					notEmpty: {
						message: '邮箱不能为空'
					},
					emailAddress: {
						message: '邮箱地址格式有误'
					}
				}
			}
		}
	});
});

由上面的代码可以看出在validators属性对应一个Json对象，里面可以包含多个验证的类型：

notEmpty：非空验证；

stringLength：字符串长度验证；

regexp：正则表达式验证；

emailAddress：邮箱地址验证（都不用我们去写邮箱的正则了~~）

除此之外，在文档里面我们看到它总共有46个验证类型，我们抽几个常见的出来看看：

base64：64位编码验证；

between：验证输入值必须在某一个范围值以内，比如大于10小于100；

creditCard：身份证验证；

date：日期验证；

ip：IP地址验证；

numeric：数值验证；

phone：电话号码验证；

uri：url验证；

更多验证类型详见：http://bv.doc.javake.cn/validators/。
当然涉及中文的验证可能会有些小问题，园友们如果有需要可以自行下去用代码测试下。

4、效果展示

submitHandler 提交按钮的事件方法

还有一个比较常用的就是submitHandler属性，它对应着提交按钮的事件方法。使用如下：

$(function () {
    $('form').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: '用户名验证失败',
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                    stringLength: {
                        min: 6,
                        max: 18,
                        message: '用户名长度必须在6到18位之间'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_]+$/,
                        message: '用户名只能包含大写、小写、数字和下划线'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: '邮箱不能为空'
                    },
                    emailAddress: {
                        message: '邮箱地址格式有误'
                    }
                }
            }
        },
        submitHandler: function (validator, form, submitButton) {
            alert("submit");
        }
    });
});

在它的Demo里面介绍了很多验证的实例。我们简单看看它的效果，至于实现代码，其实很简单，有兴趣的可以直接看api。