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)重新輸入!" } } }); //需要注意 需要將返回信息寫(xiě)在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-08JavaScript實(shí)現(xiàn)類(lèi)似淘寶的購(gòu)物車(chē)效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)購(gòu)物車(chē)特效的相關(guān)資料,文中通過(guò)示例代碼詳細(xì)介紹了,利用Javascript如何實(shí)現(xiàn)類(lèi)似淘寶購(gòu)物車(chē)中商品的單選、全選、刪除、修改等功能,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-03-03javascript應(yīng)用:Iframe自適應(yīng)其加載的內(nèi)容高度
javascript應(yīng)用:Iframe自適應(yīng)其加載的內(nèi)容高度...2007-04-04javascript實(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)盤(pá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í)遞歸樹(shù)的示例代碼

JS+CSS實(shí)現(xiàn)簡(jiǎn)易實(shí)用的滑動(dòng)門(mén)菜單效果