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


Posted in Javascript onSeptember 06, 2019

如下所示:

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判断用户名是否重复的实例

以上这篇layui的表单验证支持ajax判断用户名是否重复的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
JQuery工具函数汇总
Jun 15 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 #Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 #Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 #Javascript
vue按需加载实例详解
Sep 06 #Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 #Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 #Javascript
Nuxt使用Vuex的方法示例
Sep 06 #Javascript
You might like
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
PHP时间处理类操作示例
2018/09/05 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
javascript 有趣而诡异的数组
2009/04/06 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
Python入门教程之运算符与控制流
2016/08/17 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
工作会议欢迎词
2014/01/16 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
出纳员岗位职责
2014/03/13 职场文书
护理学专业求职信
2014/06/29 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
先进党员事迹材料
2014/12/24 职场文书
十岁生日答谢词
2015/01/05 职场文书
《刷子李》教学反思
2016/02/20 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
配置Kubernetes外网访问集群
2022/03/31 Servers
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis