快捷導(dǎo)航

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

更新時(shí)間：2019年09月06日 17:52:54 作者：vachar

今天小編就為大家分享一篇layui的表單驗(yàn)證支持ajax判斷用戶名是否重復(fù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

如下所示：

在一個(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則為沒有該用戶名可以被注冊(cè)
 return true; 
 }else {
 System.out.println(222);
 return false;
 }
 }

效果：

以上這篇layui的表單驗(yàn)證支持ajax判斷用戶名是否重復(fù)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

最全面的百度地圖JavaScript離線版開發(fā)
最全面的百度地圖JavaScript離線版開發(fā),這篇文章主要為大家詳細(xì)介紹了JavaScript離線版開發(fā)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
[js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解
下面小編就為大家?guī)?lái)一篇[js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
Vim快速合并行及vim 將文件所有行合并到一行
Vim是一個(gè)類似于Vi的著名的功能強(qiáng)大、高度可定制的文本編輯器，在Vi的基礎(chǔ)上改進(jìn)和增加了很多特性.這篇文章主要介紹了Vim快速合并行及vim 將文件所有行合并到一行,需要的朋友可以參考下
2017-11-11
微信小程序滾動(dòng)、輪播圖和文本實(shí)例詳解
輪播圖是我們?nèi)粘ｉ_發(fā)中經(jīng)常會(huì)遇到的一個(gè)需求,下面這篇文章主要給大家介紹了關(guān)于微信小程序滾動(dòng)、輪播圖和文本的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
微信小程序?qū)崿F(xiàn)滑動(dòng)驗(yàn)證拼圖
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)驗(yàn)證拼圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05
JS 特殊運(yùn)算符的使用
JavaScript中包含了一系列不常見但功能強(qiáng)大的特殊運(yùn)算符,如空值合并運(yùn)算符(??)、可選鏈運(yùn)算符(?.)等,這些運(yùn)算符在特定場(chǎng)景下極大地簡(jiǎn)化了代碼的復(fù)雜度,并提高了開發(fā)效率,通過(guò)深入了解這些特殊運(yùn)算符,開發(fā)者可以更加高效地處理各種數(shù)據(jù)和邏輯
2024-09-09
HTTP?HEAD請(qǐng)求的使用場(chǎng)合實(shí)例詳解
這篇文章主要為大家介紹了HTTP?HEAD請(qǐng)求的使用場(chǎng)合實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-12-12
5分鐘打造簡(jiǎn)易高效的webpack常用配置
這篇文章主要介紹了5分鐘打造簡(jiǎn)易高效的webpack配置,詳細(xì)的介紹了打包調(diào)試、提取公共代碼、壓縮、熱替換等配置，有興趣的可以了解一下
2017-07-07
使用RN Animated做一個(gè)“添加購(gòu)物車”動(dòng)畫的方法
這篇文章主要介紹了使用RN Animated做一個(gè)“添加購(gòu)物車”動(dòng)畫的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
layui select獲取自定義屬性方法
今天小編就為大家分享一篇layui select獲取自定義屬性方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08