layui的表單驗證支持ajax判斷用戶名是否重復(fù)的實例
更新時間:2019年09月06日 17:52:54 作者:vachar
今天小編就為大家分享一篇layui的表單驗證支持ajax判斷用戶名是否重復(fù)的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示:
在一個表單中,在提交前我們想判斷該用戶名是否存在,在layui中不支持。onblur()失去焦點事件,用按鈕來手動觸發(fā),表單又不太美觀,可以使用form表單的verify來進行驗證。
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="請輸入用戶名"> </div> </div> 注意lay-verify="username" ,在js文件中定義驗證事件。
js:
form.verify({ //將用戶名是否可用作為驗證條件 表單提交時觸發(fā) ,username:function(value){ var datas={username: value}; var message = ''; $.ajax({ type:"POST", url:xxx(對應(yīng)后臺的方法), async: false, //改為同步請求 contentType:'application/json;charset=UTF-8', data:JSON.stringify(datas), dataType:'json', success:function(data){ if(data){ }else{ message ="用戶名已存在,請重新輸入!" } } }); //需要注意 需要將返回信息寫在ajax方法外 if (message !== '') return message; } });
后臺的方法:
//管理員注冊時驗證用戶名是否可用 @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則為沒有該用戶名可以被注冊 return true; }else { System.out.println(222); return false; } }
效果:
以上這篇layui的表單驗證支持ajax判斷用戶名是否重復(fù)的實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript實現(xiàn)點擊單選按鈕改變輸入框中文本域內(nèi)容的方法
這篇文章主要介紹了JavaScript實現(xiàn)點擊單選按鈕改變輸入框中文本域內(nèi)容的方法,涉及javascript單選按鈕控制頁面元素樣式的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-08-08javascript應(yīng)用:Iframe自適應(yīng)其加載的內(nèi)容高度
javascript應(yīng)用:Iframe自適應(yīng)其加載的內(nèi)容高度...2007-04-04javascript實現(xiàn)鼠標選取拖動或Ctrl選取拖動
javascript實現(xiàn)鼠標選取拖動或Ctrl選取拖動...2007-06-06

JavaScript的設(shè)計模式經(jīng)典之建造者模式
建造者模式是設(shè)計模式的一種,將一個復(fù)雜對象的構(gòu)建與它的表示分離,使得同樣的構(gòu)建過程可以創(chuàng)建不同的表示。接下來通過本文給大家介紹JavaScript的設(shè)計模式經(jīng)典之建造者模式,感興趣的朋友一起學(xué)習(xí)吧
2016-02-02