亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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)文章

  • 通過示例徹底搞懂js閉包

    通過示例徹底搞懂js閉包

    下面小編就為大家?guī)硪黄ㄟ^示例徹底搞懂js閉包。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • JavaScript的設(shè)計模式經(jīng)典之建造者模式

    JavaScript的設(shè)計模式經(jīng)典之建造者模式

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

    JavaScript實現(xiàn)無限級遞歸樹的示例代碼

    這篇文章主要介紹了JavaScript實現(xiàn)無限級遞歸樹的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • JS+CSS實現(xiàn)簡易實用的滑動門菜單效果

    JS+CSS實現(xiàn)簡易實用的滑動門菜單效果

    這篇文章主要介紹了JS+CSS實現(xiàn)簡易實用的滑動門菜單效果,涉及JavaScript鼠標事件及頁面元素遍歷的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-09-09
  • 最新評論