<!-- 新 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 中文語(yǔ)言包 -->
<script src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/language/zh_CN.min.js"></script>

<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>

<script>
$(document).ready(function() {
$('.registerForm').bootstrapValidator({
message: 'This value is not valid', //驗(yàn)證錯(cuò)誤時(shí)的信息
feedbackIcons: { //驗(yàn)證時(shí)顯示的圖標(biāo)
valid: 'glyphicon glyphicon-ok', //正確圖標(biāo)
invalid: 'glyphicon glyphicon-remove', //錯(cuò)誤圖標(biāo)
validating: 'glyphicon glyphicon-refresh' //正在更新圖標(biāo)
},
fields: { //要驗(yàn)證哪些字段
username: { //與表單里input的name屬性對(duì)應(yīng)
message: 'The username is not valid', //驗(yàn)證錯(cuò)誤時(shí)的信息，當(dāng)然這里是可以使用中文的
validators: {
notEmpty: { //非空判斷
message: 'The username is required and cannot be empty' //驗(yàn)證錯(cuò)誤時(shí)的信息，
},
stringLength: { //長(zhǎng)度判斷
min: 6, //不得小于
max: 30, //不得超過
message: 'The username must be more than 6 and less than 30 characters long' //驗(yàn)證錯(cuò)誤時(shí)的信息，
},
regexp: { //正則表達(dá)式判斷 
regexp: /^[a-zA-Z0-9_]+$/, //表達(dá)式內(nèi)容
message: 'The username can only consist of alphabetical, number and underscore' //驗(yàn)證錯(cuò)誤時(shí)的信息，
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email is required and cannot be empty'
},
emailAddress: { //是不是正確的email格式
message: 'The input is not a valid email address' 
}
}
}
}
});
});
</script>

<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>

<script>
$(document).ready(function() {
// 隨機(jī)取min,max中間的一個(gè)數(shù)
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
// 生成隨機(jī)兩個(gè)數(shù)相加的文字顯示內(nèi)容，顯示到capchaOperation中去
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));　　 
$('#captchaForm').bootstrapValidator({ //驗(yàn)證
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) { //您可以在這里實(shí)現(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>

<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="請(qǐng)輸入您登錄用的用戶名">
<span class="input-group-addon">&nbsp;&nbsp;</span>
</div>
</div>
</div>
</form>

<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: '用戶名驗(yàn)證失敗',
validators: {
notEmpty: {message: '用戶名不能為空'},
stringLength: {min: 6,max: 18,message: '用戶名長(zhǎng)度必須在6到18位之間'},
regexp: {regexp: /^[a-zA-Z0-9_]+$/,message: '用戶名只能包含大寫、小寫、數(shù)字和下劃線'},
remote: {
message: '用戶名已經(jīng)存在',
url: '/ajax/checknewuser', //Action的地址，這里我試過，應(yīng)該是不能加入EL，但網(wǎng)上看到可以加<%=%>輸出某個(gè)值，我試驗(yàn)沒成功，不知道為什么
data:{ //傳參數(shù)
username:function(){return $("#loginName").val()}, //username參數(shù)名，不用引號(hào)，如果想傳入特定控件的值一定加入function,這樣才能把值傳入，不知道為什么……
},
delay : 2000,//每輸入一個(gè)字符，就發(fā)ajax請(qǐng)求，服務(wù)器壓力還是太大，設(shè)置2秒發(fā)送一次ajax（默認(rèn)輸入一個(gè)字符，提交一次，服務(wù)器壓力太大）
type: 'POST'//請(qǐng)求方式
}
}
}
}
});
});
</script>

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(); 
} 
}
}

{"valid":false} //表示不合法，驗(yàn)證不通過
{"valid":true} //表示合法，驗(yàn)證通過