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实现缓动动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 微信开发之微信jssdk录音功能开发示例

    微信开发之微信jssdk录音功能开发示例

    这篇文章主要介绍了微信开发之微信jssdk录音功能开发示例,在微信浏览器内打开的页面,制作一个按钮,用户按住按钮后开始录音,松手后停止录音,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 微信小程序引入map组件并在地图上标点的实现代码

    微信小程序引入map组件并在地图上标点的实现代码

    这篇文章主要介绍了微信小程序引入map组件并在地图上标点,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10
  • JS实现可针对算术表达式求值的计算器功能示例

    JS实现可针对算术表达式求值的计算器功能示例

    这篇文章主要介绍了JS实现可针对算术表达式求值的计算器功能,可实现基本的数字四则运算功能,涉及javascript基本数值运算与流程控制、判断等操作技巧,需要的朋友可以参考下
    2018-09-09
  • JavaScript更改字符串的大小写

    JavaScript更改字符串的大小写

    在javascript中涉及字符串大小写转换的方法有4个:toLowerCase()、toLocaleLowerCase()、toUpperCase()及toLocaleUpperCase()。今天我们主要来用下toUpperCase()和toLowerCase()方法。
    2015-05-05
  • 深入学习js函数的隐式参数 arguments 和 this

    深入学习js函数的隐式参数 arguments 和 this

    这篇文章主要介绍了 深入学习js函数的隐式参数 arguments 和 this,arguments是一个类数组结构,它保存了调用时传递给函数的所有实参;this是函数执行时的上下文对象, 这个对象有些让人感到困惑的行为。 下面分别对他们进行讨论。,需要的朋友可以参考下
    2019-06-06
  • JavaScript享元模式原理与用法实例详解

    JavaScript享元模式原理与用法实例详解

    这篇文章主要介绍了JavaScript享元模式原理与用法,结合实例形式总结分析了JavaScript享元模式基本概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • Bootstrap模态框水平垂直居中与增加拖拽功能

    Bootstrap模态框水平垂直居中与增加拖拽功能

    最近开发一个CMS系统使用上了Bootstrap,在开发一个添加某些选项时,打算弹出一个模态框,但是发现,模态框不会垂直居中到屏幕上,而是在屏幕上方,通过查阅资料才解决此问题,下面小编给大家分享解决思路
    2016-11-11
  • javascript将非数值转换为数值

    javascript将非数值转换为数值

    parseInt()不能转换浮点型数值,我们用parseFloat()来解决。这篇文章主要介绍了javascript将非数值转换为数值,需要的朋友可以参考下
    2018-09-09
  • 在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法

    在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法

    今天小编就为大家分享一篇在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论