BootStrap與validator 使用筆記(JAVA SpringMVC實現(xiàn))
更新時間：2016年09月21日 09:11:28 作者：aocshallo
這篇文章主要介紹了BootStrap與validator 使用筆記(JAVA SpringMVC實現(xiàn))的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
BootStrap 是一個強大的前面框架，它用優(yōu)雅的方式解決了網(wǎng)頁問題。最近正在使用其開發(fā)網(wǎng)站的表單驗證，一點體會記錄如下：
注：本文中借鑒了博客Franson 的文章使用bootstrap validator的remote驗證代碼經(jīng)驗分享(推薦)
一、準(zhǔn)備工作
1.你的網(wǎng)站環(huán)境中要有 BootStrap，中文網(wǎng)地址：http://www.bootcss.com/
2.下載BootStrap Validator相關(guān)材料，地址：http://bv.doc.javake.cn/
當(dāng)然，如果你不想一個一個下載到您的項目中的話，可以引入CDN，CDN可以用bootstrap官方的，也可以百度上搜索下“BootStrap CDN”，你一定可以理解是怎么使用。下面是我的引入代碼：
<!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" > <!-- 可選的Bootstrap主題文件（一般不用引入） --> <link rel="stylesheet" > <!-- jQuery文件。務(wù)必在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>
二、初步應(yīng)用。
這里直接引用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網(wǎng)頁代碼，一個表單，里面是用戶名，郵箱地址二個INPUT
BootStrap驗證是根據(jù)表單控件的name值進行檢驗的，下面是JS代碼：
<script>
$(document).ready(function() {
$('.registerForm').bootstrapValidator({
message: 'This value is not valid', //驗證錯誤時的信息
feedbackIcons: { //驗證時顯示的圖標(biāo)
valid: 'glyphicon glyphicon-ok', //正確圖標(biāo)
invalid: 'glyphicon glyphicon-remove', //錯誤圖標(biāo)
validating: 'glyphicon glyphicon-refresh' //正在更新圖標(biāo)
},
fields: { //要驗證哪些字段
username: { //與表單里input的name屬性對應(yīng)
message: 'The username is not valid', //驗證錯誤時的信息，當(dāng)然這里是可以使用中文的
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_]+$/, //表達式內(nèi)容
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 已經(jīng)定義好很多驗證方式，每一種方式的用法參見：http://bv.doc.javake.cn/validators/
其中幾個常用的，提一下，其實一看就懂，很好理解：
三、進階應(yīng)用
如果不想用默認(rèn)的模板，可以使用以下個方式來進行一些自定義驗證
callback方式，API地址：http://bv.doc.javake.cn/validators/callback/
callback方式可以讓您自定義函數(shù)用于判斷，下面看個例子
HTML(內(nèi)容就是顯示輸入運算結(jié)果)
<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中間的一個數(shù)
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
// 生成隨機兩個數(shù)相加的文字顯示內(nèi)容，顯示到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) { //您可以在這里實現(xiàn)自定義功能
// 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>
這樣當(dāng)默認(rèn)的方式不能滿足您的要求的時候就可以用callback方式，自己實現(xiàn)函數(shù)用于完成特殊的判斷，比如判斷中國居民身份證號是否正確……
四、異步驗證
最常見的應(yīng)用就是驗證用戶名是否注冊過，下面看我的程序中的代碼：
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: '用戶名只能包含大寫、小寫、數(shù)字和下劃線'},
remote: {
message: '用戶名已經(jīng)存在',
url: '/ajax/checknewuser', //Action的地址，這里我試過，應(yīng)該是不能加入EL，但網(wǎng)上看到可以加<%=%>輸出某個值，我試驗沒成功，不知道為什么
data:{ //傳參數(shù)
username:function(){return $("#loginName").val()}, //username參數(shù)名，不用引號，如果想傳入特定控件的值一定加入function,這樣才能把值傳入，不知道為什么……
},
delay : 2000,//每輸入一個字符，就發(fā)ajax請求，服務(wù)器壓力還是太大，設(shè)置2秒發(fā)送一次ajax（默認(rèn)輸入一個字符，提交一次，服務(wù)器壓力太大）
type: 'POST'//請求方式
}
}
}
}
});
});
</script>
Action 用 SpringMvc實現(xiàn)
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的設(shè)置
response.setContentType("text/xml;charset=utf-8");
response.setHeader("Cache-Control","no-cache");
try {
//這是輸出為JSON串的一種方式，結(jié)果應(yīng)為JSON串，屬性名一定是valid，值為true或false
JSONObject 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實現(xiàn))，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- java Springboot實現(xiàn)多文件上傳功能
- springboot+webmagic實現(xiàn)java爬蟲jdbc及mysql的方法
- Java Spring boot 2.0 跨域問題的解決
- 解決Spring Boot和Feign中使用Java 8時間日期API（LocalDate等）的序列化問題
- SpringBoot文件上傳控制及Java 獲取和判斷文件頭信息
- springboot的java配置方式(實例講解)
- 詳解Spring Boot 中使用 Java API 調(diào)用 lucene
- Spring Boot利用Lombok減少Java中樣板代碼的方法示例
- JavaEE微框架Spring Boot深入解讀
- 詳解Spring Boot 使用Java代碼創(chuàng)建Bean并注冊到Spring中
- Spring Boot中利用JavaMailSender發(fā)送郵件的方法示例（附源碼）
- 基于Bootstrap的Java開發(fā)問題匯總（Spring MVC）
- 淺談Java中Spring Boot的優(yōu)勢
相關(guān)文章
下面小編就為大家?guī)硪黄仙Ｕ刯avascript的類型轉(zhuǎn)換。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
JS 在數(shù)組指定位置插入/刪除數(shù)據(jù)的方法
下面小編就為大家?guī)硪黄狫S 在數(shù)組指定位置插入/刪除數(shù)據(jù)的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
webpack自動引入打包資源HtmlWebpackPlugin的實現(xiàn)
本文主要介紹了webpack自動引入打包資源HtmlWebpackPlugin的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡易計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
兼容多個瀏覽器的自動加載函數(shù)。2009-05-05
用document.documentElement取代document.body的原因分析
ll建議用document.documentElement代替document.body2009-11-11
這篇文章主要介紹了原生JS實現(xiàn)的雪花飄落動畫效果,涉及javascript數(shù)值運算及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細介紹了bootstrap PrintThis打印插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要給大家介紹了關(guān)于使用Node版本升級和降級的相關(guān)資料,在開發(fā)的工程中我們可能需要經(jīng)常切換node版本來應(yīng)對不同的開發(fā)環(huán)境,所以需要經(jīng)常使用不同版本的node,需要的朋友可以參考下2023-09-09