layui的表单验证支持ajax判断用户名是否重复的实例

 更新时间:2019年09月06日 17:52:54   作者:vachar  
今天小编就为大家分享一篇layui的表单验证支持ajax判断用户名是否重复的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持。onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用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({
 //将用户名是否可用作为验证条件 表单提交时触发
 ,username:function(value){
 var datas={username: value};
 var message = '';
 $.ajax({
  type:"POST",
  url:xxx(对应后台的方法),
  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);
 //根据用户名查询管理员(包括status为0的  以防恢复引起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判断用户名是否重复的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    这篇文章主要介绍了JavaScript实现点击单选按钮改变输入框中文本域内容的方法,涉及javascript单选按钮控制页面元素样式的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • JavaScript实现类似淘宝的购物车效果

    JavaScript实现类似淘宝的购物车效果

    这篇文章主要介绍了JavaScript实现购物车特效的相关资料,文中通过示例代码详细介绍了,利用Javascript如何实现类似淘宝购物车中商品的单选、全选、删除、修改等功能,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-03-03
  • javascript应用:Iframe自适应其加载的内容高度

    javascript应用:Iframe自适应其加载的内容高度

    javascript应用:Iframe自适应其加载的内容高度...
    2007-04-04
  • javascript实现鼠标选取拖动或Ctrl选取拖动

    javascript实现鼠标选取拖动或Ctrl选取拖动

    javascript实现鼠标选取拖动或Ctrl选取拖动...
    2007-06-06
  • 基于JS+Canvas的lucky-canvas 抽奖功能

    基于JS+Canvas的lucky-canvas 抽奖功能

    一个基于 Js + Canvas 的大转盘和九宫格和老虎机抽奖,使用lucky-canvas 功能可以自由配置,多端适配的特点,本文通过实例代码给大家详细介绍抽奖方法,感兴趣的朋友一起看看吧
    2022-06-06
  • JS事件流与事件处理程序实例分析

    JS事件流与事件处理程序实例分析

    这篇文章主要介绍了JS事件流与事件处理程序,结合实例形式分析了事件流与事件处理程序相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2019-08-08
  • 通过示例彻底搞懂js闭包

    通过示例彻底搞懂js闭包

    下面小编就为大家带来一篇通过示例彻底搞懂js闭包。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JavaScript的设计模式经典之建造者模式

    JavaScript的设计模式经典之建造者模式

    建造者模式是设计模式的一种,将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。接下来通过本文给大家介绍JavaScript的设计模式经典之建造者模式,感兴趣的朋友一起学习吧
    2016-02-02
  • JavaScript实现无限级递归树的示例代码

    JavaScript实现无限级递归树的示例代码

    这篇文章主要介绍了JavaScript实现无限级递归树的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • JS+CSS实现简易实用的滑动门菜单效果

    JS+CSS实现简易实用的滑动门菜单效果

    这篇文章主要介绍了JS+CSS实现简易实用的滑动门菜单效果,涉及JavaScript鼠标事件及页面元素遍历的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09

最新评论