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