最近項目用到了一個很強大的表單驗證。記錄下。官方地址：http://formvalidation.io/api/
還有一點很重要：這個插件的Bootstrap最好用他們自帶的，有點改動。不用再去Bootstrap官網下載。
向上效果：
先導入資源：
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css" rel="external nofollow" /> <link rel="stylesheet" href="dist/css/formValidation.css" rel="external nofollow" /
<script type="text/javascript" src="vendor/jquery/jquery.min.js"></script> <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="dist/js/formValidation.js"></script> <script type="text/javascript" src="dist/js/framework/bootstrap.js"></script> <script type="text/javascript" src="dist/js/language/zh_CN.js"></script>
html：
<form id="defaultForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="boxId" />
</div>
</div>
</form>
下面是驗證代碼；
$('#defaultForm').formValidation({
message: '此值無效', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, locale: 'zh_CN', fields:{
boxId:{
verbose: false,//代表驗證按順序驗證。驗證成功才會下一個（驗證成功才會發最后一個remote遠程驗證）
validators: {
notEmpty: {
message: '這是必填字段'
},
digits: {
message: '值不是數字'
},
stringLength: {
min: 16,
message:'必須為16個數字'
},
remote: {
type: 'POST',
url: '/box/unique',
message: '此設備號已存在',
delay: 2000
}
}
},
onSuccess:function(){
//點擊提交表單。表單所有都驗證成功
}
});
后臺返回
{ “valid”: true }//通過驗證
或
{ “valid”: false }//不通過—》 ‘此設備號已存在',
效果圖；
以上所述是小編給大家介紹的Bootstrap 表單驗證formValidation 實現遠程驗證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
