layui的表單驗(yàn)證支持ajax判斷用戶名是否重復(fù)的實(shí)例
如下所示:

在一個(gè)表單中,在提交前我們想判斷該用戶名是否存在,在layui中不支持。onblur()失去焦點(diǎn)事件,用按鈕來(lái)手動(dòng)觸發(fā),表單又不太美觀,可以使用form表單的verify來(lái)進(jìn)行驗(yàn)證。
html:
<div class="layui-form-item"> <label class="layui-form-label">用戶名</label> <div class="layui-input-block"> <input type="text" id="username" name="username" autocomplete="off" class="layui-input" lay-verify="username" placeholder="請(qǐng)輸入用戶名"> </div> </div> 注意lay-verify="username" ,在js文件中定義驗(yàn)證事件。
js:
form.verify({
//將用戶名是否可用作為驗(yàn)證條件 表單提交時(shí)觸發(fā)
,username:function(value){
var datas={username: value};
var message = '';
$.ajax({
type:"POST",
url:xxx(對(duì)應(yīng)后臺(tái)的方法),
async: false, //改為同步請(qǐng)求
contentType:'application/json;charset=UTF-8',
data:JSON.stringify(datas),
dataType:'json',
success:function(data){
if(data){
}else{
message ="用戶名已存在,請(qǐng)重新輸入!"
}
}
});
//需要注意 需要將返回信息寫在ajax方法外
if (message !== '')
return message;
}
});
后臺(tái)的方法:
//管理員注冊(cè)時(shí)驗(yàn)證用戶名是否可用
@RequestMapping(value="/xxx",method=RequestMethod.POST,consumes="application/json")
@ResponseBody
public boolean toVerifyUsername(@RequestBody Admin admin) {
String username=admin.getUsername();
System.out.println(username);
//根據(jù)用戶名查詢管理員(包括status為0的 以防恢復(fù)引起bug)
Admin admin1=adminService.findByUsernameno(username);
if(admin1==null)
{
System.out.println(111);
//返回true則為沒(méi)有該用戶名可以被注冊(cè)
return true;
}else {
System.out.println(222);
return false;
}
}
效果:

以上這篇layui的表單驗(yàn)證支持ajax判斷用戶名是否重復(fù)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實(shí)現(xiàn)點(diǎn)擊單選按鈕改變輸入框中文本域內(nèi)容的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊單選按鈕改變輸入框中文本域內(nèi)容的方法,涉及javascript單選按鈕控制頁(yè)面元素樣式的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
JavaScript實(shí)現(xiàn)類似淘寶的購(gòu)物車效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)購(gòu)物車特效的相關(guān)資料,文中通過(guò)示例代碼詳細(xì)介紹了,利用Javascript如何實(shí)現(xiàn)類似淘寶購(gòu)物車中商品的單選、全選、刪除、修改等功能,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-03-03
javascript應(yīng)用:Iframe自適應(yīng)其加載的內(nèi)容高度
javascript應(yīng)用:Iframe自適應(yīng)其加載的內(nèi)容高度...2007-04-04
javascript實(shí)現(xiàn)鼠標(biāo)選取拖動(dòng)或Ctrl選取拖動(dòng)
javascript實(shí)現(xiàn)鼠標(biāo)選取拖動(dòng)或Ctrl選取拖動(dòng)...2007-06-06
基于JS+Canvas的lucky-canvas?抽獎(jiǎng)功能
一個(gè)基于?Js?+?Canvas?的大轉(zhuǎn)盤和九宮格和老虎機(jī)抽獎(jiǎng),使用lucky-canvas?功能可以自由配置,多端適配的特點(diǎn),本文通過(guò)實(shí)例代碼給大家詳細(xì)介紹抽獎(jiǎng)方法,感興趣的朋友一起看看吧2022-06-06
JavaScript的設(shè)計(jì)模式經(jīng)典之建造者模式
JavaScript實(shí)現(xiàn)無(wú)限級(jí)遞歸樹的示例代碼
JS+CSS實(shí)現(xiàn)簡(jiǎn)易實(shí)用的滑動(dòng)門菜單效果

