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

<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文件中定義驗(yàn)證事件。

form.verify({
 //將用戶名是否可用作為驗(yàn)證條件 表單提交時(shí)觸發(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;
 }
});

//管理員注冊時(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則為沒有該用戶名可以被注冊
 return true; 
 }else {
 System.out.println(222);
 return false;
 }
 }