使用bootstrap validator的remote驗(yàn)證代碼經(jīng)驗(yàn)分享(推薦)
這里需要說(shuō)一下,bootstrapvalidator的幫助文檔寫的比較簡(jiǎn)單,對(duì)于remote驗(yàn)證器的說(shuō)明更是如此,在經(jīng)歷多方測(cè)試之后才明白如何使用這個(gè)驗(yàn)證器。
一個(gè)典型的ajax驗(yàn)證代碼如下:

服務(wù)端驗(yàn)證代碼(使用spring mvc)如下:
/*
* 返回String類型的結(jié)果
* 檢查用戶名的合法性,如果用戶已經(jīng)存在,返回false,否則返回true(返回json數(shù)據(jù),格式為{"valid",true})
*/
@RequestMapping(value = "/checkNameExistsMethod1", produces = "application/json;charset=UTF-8")
public @ResponseBody
String checkNameValidMethod1(@RequestParam String name) {
boolean result = true;
List<Employee> lstEmployees = employeeService.getAllEmployees();
for (Employee employee : lstEmployees) {
if (employee.getName().equals(name)) {
result = false;
break;
}
}
Map<String, Boolean> map = new HashMap<>();
map.put("valid", result);
ObjectMapper mapper = new ObjectMapper();
String resultString = "";
try {
resultString = mapper.writeValueAsString(map);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return resultString;
}
這里需要說(shuō)明的是bootstrap的remote驗(yàn)證器需要的返回結(jié)果一定是json格式的數(shù)據(jù) :
{"valid":false} //表示不合法,驗(yàn)證不通過(guò)
{"valid":true} //表示合法,驗(yàn)證通過(guò)
如果返回任何其他的值,頁(yè)面驗(yàn)證將獲取不到驗(yàn)證結(jié)果導(dǎo)致無(wú)法驗(yàn)證。
附一段完整的遠(yuǎn)程remote驗(yàn)證的代碼加說(shuō)明:
$(function(){/* 文檔加載,執(zhí)行一個(gè)函數(shù)*/
$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {/*input狀態(tài)樣式圖片*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {/*驗(yàn)證:規(guī)則*/
username: {//驗(yàn)證input項(xiàng):驗(yàn)證規(guī)則
message: 'The username is not valid',
validators: {
notEmpty: {//非空驗(yàn)證:提示消息
message: '用戶名不能為空'
},
stringLength: {
min: 6,
max: 30,
message: '用戶名長(zhǎng)度必須在6到30之間'
},
threshold : 6 , //有6字符以上才發(fā)送ajax請(qǐng)求,(input中輸入一個(gè)字符,插件會(huì)向服務(wù)器發(fā)送一次,設(shè)置限制,6字符以上才開始)
remote: {//ajax驗(yàn)證。server result:{"valid",true or false} 向服務(wù)發(fā)送當(dāng)前input name值,獲得一個(gè)json數(shù)據(jù)。例表示正確:{"valid",true}
url: 'exist2.do',//驗(yàn)證地址
message: '用戶已存在',//提示消息
delay : 2000,//每輸入一個(gè)字符,就發(fā)ajax請(qǐng)求,服務(wù)器壓力還是太大,設(shè)置2秒發(fā)送一次ajax(默認(rèn)輸入一個(gè)字符,提交一次,服務(wù)器壓力太大)
type: 'POST'//請(qǐng)求方式
/**自定義提交數(shù)據(jù),默認(rèn)值提交當(dāng)前input value
* data: function(validator) {
return {
password: $('[name="passwordNameAttributeInYourForm"]').val(),
whatever: $('[name="whateverNameAttributeInYourForm"]').val()
};
}
*/
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '用戶名由數(shù)字字母下劃線和.組成'
}
}
},
password: {
message:'密碼無(wú)效',
validators: {
notEmpty: {
message: '密碼不能為空'
},
stringLength: {
min: 6,
max: 30,
message: '用戶名長(zhǎng)度必須在6到30之間'
},
identical: {//相同
field: 'password', //需要進(jìn)行比較的input name值
message: '兩次密碼不一致'
},
different: {//不能和用戶名相同
field: 'username',//需要進(jìn)行比較的input name值
message: '不能和用戶名相同'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
repassword: {
message: '密碼無(wú)效',
validators: {
notEmpty: {
message: '用戶名不能為空'
},
stringLength: {
min: 6,
max: 30,
message: '用戶名長(zhǎng)度必須在6到30之間'
},
identical: {//相同
field: 'password',
message: '兩次密碼不一致'
},
different: {//不能和用戶名相同
field: 'username',
message: '不能和用戶名相同'
},
regexp: {//匹配規(guī)則
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: '郵件不能為空'
},
emailAddress: {
message: '請(qǐng)輸入正確的郵件地址如:123@qq.com'
}
}
},
phone: {
message: 'The phone is not valid',
validators: {
notEmpty: {
message: '手機(jī)號(hào)碼不能為空'
},
stringLength: {
min: 11,
max: 11,
message: '請(qǐng)輸入11位手機(jī)號(hào)碼'
},
regexp: {
regexp: /^1[3|5|8]{1}[0-9]{9}$/,
message: '請(qǐng)輸入正確的手機(jī)號(hào)碼'
}
}
},
invite: {
message: '邀請(qǐng)碼',
validators: {
notEmpty: {
message: '邀請(qǐng)碼不能為空'
},
stringLength: {
min: 8,
max: 8,
message: '請(qǐng)輸入正確長(zhǎng)度的邀請(qǐng)碼'
},
regexp: {
regexp: /^[\w]{8}$/,
message: '請(qǐng)輸入正確的邀請(qǐng)碼(包含數(shù)字字母)'
}
}
},
}
})
.on('success.form.bv', function(e) {//點(diǎn)擊提交之后
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data 提交至form標(biāo)簽中的action,result自定義
$.post($form.attr('action'), $form.serialize(), function(result) {
//do something...
});
});
});
以上所述是小編給大家介紹的使用bootstrap validator的remote驗(yàn)證經(jīng)驗(yàn)分享(推薦),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
js下獲得客戶端操作系統(tǒng)的函數(shù)代碼(1:vista,2:windows7,3:2000,4:xp,5:2003,6:20
有時(shí)候需要在客戶端獲取操作系統(tǒng)的版本,以便更好的給用戶合適的信息,提高用戶體驗(yàn),好不容易從網(wǎng)站發(fā)現(xiàn)了這段代碼,分享給大家。2011-10-10
JavaScript獲取當(dāng)前url路徑過(guò)程解析
這篇文章主要介紹了JavaScript獲取當(dāng)前url路徑過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
JavaScript前端控制網(wǎng)絡(luò)并發(fā)數(shù)目的常見方法小結(jié)
控制前端發(fā)起請(qǐng)求的并發(fā)數(shù),即限制同一時(shí)間內(nèi)進(jìn)行處理的請(qǐng)求數(shù)量,是一種有效的策略,本文將詳細(xì)介紹前端控制并發(fā)數(shù)的幾種常見做法,希望對(duì)大家有所幫助2023-12-12
ionic2 tabs 圖標(biāo)自定義實(shí)例
這篇文章主要介紹了ionic2 tabs 圖標(biāo)自定義,需要的朋友可以參考下2017-03-03
淺析jsopn跨域請(qǐng)求原理及cors(跨域資源共享)的完美解決方法
由于同源策略的緣故,ajax不能向不同域的網(wǎng)站發(fā)出請(qǐng)求。接下來(lái)通過(guò)本文給大家介紹jsopn跨域請(qǐng)求原理及cors(跨域資源共享)的完美解決方法,需要的朋友可以參考下2017-02-02
JS實(shí)現(xiàn)可改變列寬的table實(shí)例
本文為大家詳細(xì)介紹下通過(guò)JS實(shí)現(xiàn)可改變列寬的table,具體的思路及代碼如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07
javascript實(shí)現(xiàn)簡(jiǎn)約的頁(yè)面右下角點(diǎn)擊彈出窗口示例【測(cè)試可用】
這篇文章主要介紹了javascript實(shí)現(xiàn)的頁(yè)面右下角點(diǎn)擊彈出窗口功能,結(jié)合實(shí)例形式詳細(xì)分析了javascript頁(yè)面右下角點(diǎn)擊彈出窗口功能的相關(guān)步驟、原理與注意事項(xiàng),需要的朋友可以參考下2023-07-07

