bootstrapvalidato

<div class="container"><div class="row"><!-- form: --><section><div class="page-header"><h1>用户注册</h1></div><div class="col-lg-8 col-lg-offset-2"><form id="defaultForm" method="post" action="target.php"class="form-horizontal"><fieldset><div class="form-group"><label class="col-lg-3 control-label">Username</label><div class="col-lg-5"><input type="text" class="form-control" name="username" id="username"/></div></div></fieldset><fieldset><div class="form-group"><label class="col-lg-3 control-label">Password</label><div class="col-lg-5"><input type="password" class="form-control" name="password" id="password"/></div></div><div class="form-group"><label class="col-lg-3 control-label">Retype password</label><div class="col-lg-5"><input type="password" class="form-control"name="confirmPassword" /></div></div><!-- 时间 --><div class="form-group" style="display: none;"><label class="col-lg-3 control-label">time</label><div class="col-lg-5"><input type="text" class="form-control" name="" id="time"/></div></div><div class="form-group"><label class="col-lg-3 control-label">comment</label><div class="col-lg-5"><textarea class="form-control" name="comment" rows="5" id="comment"></textarea></div></div></fieldset><div class="form-group"><div class="col-lg-9 col-lg-offset-3" ><button type="submit" class="btn btn-primary" style="margin-left: 85px;">Submit</button><button type="submit" class="btn btn-primary" style="margin-left: 80px;">Replace</button></div></div></form></div></section><!-- :form --></div></div>

样式布局bookstrap差不多一样

<link rel="stylesheet" href="bootstrap/css/bootstrap.css" /><link rel="stylesheet" href="bootstrap/css/bootstrapValidator.css" /><script type="text/javascript" src="js/jquery-2.2.3.js"></script><script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script><script type="text/javascript"src="bootstrap/js/bootstrapValidator.min.js"></script>

js脚本

我稍微改动了提示

$('#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 : '用户名不能为空'},stringLength : {min : 6,max : 30,message : '用户名必须大于6，小于30字符长'},regexp : {regexp : /^[a-zA-Z0-9_\.]+$/,message : '用户名只能由字母、数字、点和下划线组成'}}},password : {validators : {notEmpty : {message : '密码是必需的，不能是空的'},identical : {field : 'confirmPassword',message : '密码和它的确认是不一样的'},different : {field : 'username',message : '密码不能与用户名相同'}}},confirmPassword : {validators : {notEmpty : {message : '确认密码是必需的，并且不能是空的'},identical : {field : 'password',message : '密码和它的确认是不一样的'},different : {field : 'username',message : '密码不能与用户名相同'}}}}});

参数：

notEmpty：非空验证；

stringLength：字符串长度验证；

regexp：正则表达式验证；

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

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

base64：64位编码验证；

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

creditCard：身份证验证；

date：日期验证；

ip：IP地址验证；

numeric：数值验证；

phone：电话号码验证；

uri：url验证；

附上源码：

bootstrapvalidator源码：https://github.com/nghuuphuoc/bootstrapvalidator

boostrapvalidator api：http://bv.doc.javake.cn/api/

http://web.jobbole.com/87169/例子