基於BootstrapValidator的Form表單驗證(24)
編輯：關於JavaScript
Form表單進行數據驗證是十分必要的，我們可以自己寫JS腳本或者使用JQuery Validate 插件來實現。對於Bootstrap而言，利用BootstrapValidator來做Form表單驗證是個相當不錯的選擇，兩者完全兼容，我們也不用去關注CSS樣式等美工效果。
0x01 引入BootstrapValidator
官網：BootstrapValidator，作為一個純粹的使用者，我們可以在上面的鏈接處下載相關文件並引入，也可以利用CDN方式引入：
<link href="//cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
0x02 用戶注冊實例
下面使用一個用戶注冊的實例，來總結BootstrapValidator的基本使用方法（其中的JS和CSS文件的引入，請根據自己的實際位置進行調整）：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>用戶注冊</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../../css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../../../js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
</head>
<body>
<div class="container col-lg-3 col-lg-offset-3">
<div class="page-header">
<h3>用戶注冊</h3>
</div>
<div>
<form id="registerForm" method="POST" class="form-horizontal" action="用戶注冊.html">
<div class="form-group">
<!--注冊的用戶名-->
<label class="control-label" for="username">*請輸入注冊用戶名:</label>
<input type="text" class="form-control" placeholder="請輸入注冊用戶名" name="username" id="username">
</div>
<div class="form-group">
<!--注冊密碼-->
<label class="control-label" for="password">*請輸入注冊密碼:</label>
<input type="password" class="form-control" placeholder="請輸入注冊密碼" name="password" id="password">
</div>
<div class="form-group">
<!--確認密碼-->
<label class="control-label" for="repassword">*請輸入確認密碼:</label>
<input type="password" class="form-control" placeholder="請輸入確認密碼" name="repassword" id="repassword">
</div>
<div class="form-group">
<label class="control-label" for="phone">*請輸入手機號碼:</label>
<input type="text" class="form-control" placeholder="請輸入手機號碼" name="phone" id="phone">
</div>
<div class="form-group">
<label class="control-label" for="email">*請輸入電子郵箱:</label>
<input type="text" class="form-control" placeholder="請輸入電子郵箱" name="email" id="email">
</div>
<div class="form-group">
<label class="control-label" for="inviteCode">*請輸入邀請碼:</label>
<input type="text" class="form-control" placeholder="請輸入邀請碼" name="inviteCode" id="inviteCode">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary form-control">提交注冊</button>
</div>
</form>
</div>
</div>
<script>
$(function () {
<!--數據驗證-->
$("#registerForm").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:3,
max:20,
message:'用戶名長度必須位於3到20之間'
},
// 基於正則表達是的驗證
regexp:{
regexp:/^[a-zA-Z0-9_\.]+$/,
message:'用戶名由數字字母下劃線和.組成'
}
}
},
// 密碼
password:{
message:'密碼非法',
validators:{
notEmpty:{
message:'密碼不能為空'
},
// 限制字符串長度
stringLength:{
min:3,
max:20,
message:'密碼長度必須位於3到20之間'
},
// 相同性檢測
identical:{
// 需要驗證的field
field:'password',
message:'兩次密碼輸入不一致'
},
// 基於正則表達是的驗證
regexp:{
regexp:/^[a-zA-Z0-9_\.]+$/,
message:'密碼由數字字母下劃線和.組成'
}
}
},
// 確認密碼
repassword:{
message:'密碼非法',
validators:{
notEmpty:{
message:'密碼不能為空'
},
// 限制字符串長度
stringLength:{
min:3,
max:20,
message:'密碼長度必須位於3到20之間'
},
// 相同性檢測
identical:{
// 需要驗證的field
field:'password',
message:'兩次密碼輸入不一致'
},
// 基於正則表達是的驗證
regexp:{
regexp:/^[a-zA-Z0-9_\.]+$/,
message:'密碼由數字字母下劃線和.組成'
}
}
},
// 電子郵箱
email:{
validators:{
notEmpty:{
message:'郵箱地址不能為空'
},
emailAddress:{
message:'請輸入正確的郵箱地址'
}
}
},
// 手機號碼
phone:{
validators:{
notEmpty:{
message:'手機號碼不能為空'
},
stringlength:{
min:11,
max:11,
message:'請輸入11位手機號碼'
},
regexp:{
regexp:/^1[3|5|8]{1}[0-9]{9}$/,
message:'請輸入正確的手機號碼'
}
}
},
// 邀請碼
inviteCode:{
validators:{
notEmpty:{
message:'邀請碼不能為空'
},
stringlength:{
min:9,
max:9,
message:'請輸入9位邀請碼'
},
regexp:{
regexp:/^[\w]{8}$/,
message:'邀請碼由數字和字母組成'
}
}
}
}
})
})
</script>
</body>
</html>
驗證效果如下：
0x03 後記
在實際應用中，可能還會遇到類似Ajax提交驗證的問題，處理過程是類似的，以後再結合實際的應用來講這個問題。
類似BootstrapValidator這種基於JS來做驗證的過程只是客戶端驗證，只是為了提高用戶體驗，並不能保證提交數據的安全性，後端開發者還要做相應的後台驗證。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
小編推薦
熱門推薦