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/例子