BootStrap 是一個強大的前面框架，它用優雅的方式解決了網頁問題。最近正在使用其開發網站的表單驗證，一點體會記錄如下：
注：本文中借鑒了博客Franson 的文章使用bootstrap validator的remote驗證代碼經驗分享(推薦)
一、準備工作
1.你的網站環境中要有 BootStrap，中文網地址：http://www.bootcss.com/
2.下載BootStrap Validator相關材料，地址：http://bv.doc.javake.cn/
當然，如果你不想一個一個下載到您的項目中的話，可以引入CDN，CDN可以用bootstrap官方的，也可以百度上搜索下“BootStrap CDN”，你一定可以理解是怎么使用。下面是我的引入代碼：
<!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" ><!-- 可選的Bootstrap主題文件（一般不用引入） --><link rel="stylesheet" ><!-- jQuery文件。務必在bootstrap.min.js 之前引入 --><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><!-- Bootstrap Validator JS文件 --><script src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script> <!-- Bootstrap Validator 樣式文件 --><link rel="stylesheet"> <!-- Bootstrap Validator 中文語言包 --><script src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/language/zh_CN.min.js"></script>
二、初步應用。
這里直接引用BootStrap Validator 官方的例子，先看HTML代碼：
<form class="form-horizontal"><div class="form-group"><label class="col-lg-3 control-label">Username</label><div class="col-lg-9"><input type="text" class="form-control" name="username" /></div></div><div class="form-group"><label class="col-lg-3 control-label">Email address</label><div class="col-lg-9"><input type="text" class="form-control" name="email" /></div></div></form>
一段很普通的BootStrap網頁代碼，一個表單，里面是用戶名，郵箱地址二個INPUT
BootStrap驗證是根據表單控件的name值進行檢驗的，下面是JS代碼：
<script>$(document).ready(function() {$('.registerForm').bootstrapValidator({message: 'This value is not valid', //驗證錯誤時的信息feedbackIcons: { //驗證時顯示的圖標valid: 'glyphicon glyphicon-ok', //正確圖標invalid: 'glyphicon glyphicon-remove', //錯誤圖標validating: 'glyphicon glyphicon-refresh' //正在更新圖標},fields: { //要驗證哪些字段username: { //與表單里input的name屬性對應message: 'The username is not valid', //驗證錯誤時的信息，當然這里是可以使用中文的validators: {notEmpty: { //非空判斷message: 'The username is required and cannot be empty' //驗證錯誤時的信息，},stringLength: { //長度判斷min: 6, //不得小于max: 30, //不得超過message: 'The username must be more than 6 and less than 30 characters long' //驗證錯誤時的信息，},regexp: { //正則表達式判斷 regexp: /^[a-zA-Z0-9_]+$/, //表達式內容message: 'The username can only consist of alphabetical, number and underscore' //驗證錯誤時的信息，}}},email: {validators: {notEmpty: {message: 'The email is required and cannot be empty'},emailAddress: { //是不是正確的email格式message: 'The input is not a valid email address' }}}}});});</script>BootStrap Validator 已經定義好很多驗證方式，每一種方式的用法參見：http://bv.doc.javake.cn/validators/
其中幾個常用的，提一下，其實一看就懂，很好理解：
三、進階應用
如果不想用默認的模板，可以使用以下個方式來進行一些自定義驗證
callback方式，API地址：http://bv.doc.javake.cn/validators/callback/
callback方式可以讓您自定義函數用于判斷，下面看個例子
HTML(內容就是顯示輸入運算結果)
<form id="captchaForm" class="form-horizontal"><div class="form-group"><label class="col-lg-3 control-label" id="captchaOperation"></label><div class="col-lg-2"><input type="text" class="form-control" name="captcha" /></div></div></form>
來看看JS
<script>$(document).ready(function() {// 隨機取min,max中間的一個數function randomNumber(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);};// 生成隨機兩個數相加的文字顯示內容，顯示到capchaOperation中去$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' ')); $('#captchaForm').bootstrapValidator({ //驗證feedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {captcha: {validators: {callback: { //callback方式message: 'Wrong answer',callback: function(value, validator) { //您可以在這里實現自定義功能// Determine the numbers which are generated in captchaOperation //這里面value就是input里輸入的值 var items = $('#captchaOperation').html().split(' '),sum = parseInt(items[0]) + parseInt(items[2]);return value == sum;}}}}}});});</script>這樣當默認的方式不能滿足您的要求的時候就可以用callback方式，自己實現函數用于完成特殊的判斷，比如判斷中國居民身份證號是否正確……
四、異步驗證
最常見的應用就是驗證用戶名是否注冊過，下面看我的程序中的代碼：
HTML
<form class="form-horizontal"><div class=" form-group has-feedback has-error"><label for="loginName" class="col-sm-3 control-label ">用戶名：</label><div class="col-sm-5"><div class="input-group"><input type="text" class="form-control" id="loginName" name="loginName" placeholder="請輸入您登錄用的用戶名"><span class="input-group-addon"> </span></div></div></div></form>
JS
<script>$(function () {$('form').bootstrapValidator({message: 'This value is not valid',feedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {loginName: {message: '用戶名驗證失敗',validators: {notEmpty: {message: '用戶名不能為空'},stringLength: {min: 6,max: 18,message: '用戶名長度必須在6到18位之間'},regexp: {regexp: /^[a-zA-Z0-9_]+$/,message: '用戶名只能包含大寫、小寫、數字和下劃線'},remote: {message: '用戶名已經存在',url: '/ajax/checknewuser', //Action的地址，這里我試過，應該是不能加入EL，但網上看到可以加<%=%>輸出某個值，我試驗沒成功，不知道為什么data:{ //傳參數username:function(){return $("#loginName").val()}, //username參數名，不用引號，如果想傳入特定控件的值一定加入function,這樣才能把值傳入，不知道為什么……},delay : 2000,//每輸入一個字符，就發ajax請求，服務器壓力還是太大，設置2秒發送一次ajax（默認輸入一個字符，提交一次，服務器壓力太大）type: 'POST'//請求方式}}}}});});</script>Action 用 SpringMvc實現
package com.aocshallo.actions.ajax;import java.io.IOException;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import org.json.JSONObject;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;@Controller@RequestMapping("/ajax")public class AjaxAction extends BaseAction {public AjaxAction() {// TODO Auto-generated constructor stub}@RequestMapping("/checknewuser")public void checkNewUser(HttpSession session,HttpServletRequest request,HttpServletResponse response) throws IOException{//。。。。 這是您的判斷邏輯Boolean ret = true; // 這是最終返回值//下面是response的設置response.setContentType("text/xml;charset=utf-8"); response.setHeader("Cache-Control","no-cache"); try { //這是輸出為JSON串的一種方式，結果應為JSON串，屬性名一定是valid，值為true或falseJSONObject jsobjcet = new JSONObject(); jsobjcet.put("valid", ret);response.getWriter().write(jsobjcet.toString()); //System.out.println(jsobjcet.toString()); } catch (IOException e) { e.printStackTrace(); } }}您的Action最終輸出的一定是下面形式的文本：
{"valid":false} //表示不合法，驗證不通過{"valid":true} //表示合法，驗證通過所以才使用JSONObject做為輸出。
以上所述是小編給大家介紹的BootStrap-validator 使用記錄(JAVA SpringMVC實現)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
