最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:懂视网 责编:小采 时间:2020-11-27 21:50:51
文档

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

layui的表单验证支持ajax判断用户名是否重复的实例:如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持。onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证。 html: <div class=layui-form-item> &
推荐度:
导读layui的表单验证支持ajax判断用户名是否重复的实例:如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持。onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证。 html: <div class=layui-form-item> &

如下所示:

在一个表单中,在提交前我们想判断该用户名是否存在,在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判断用户名是否重复的实例

layui的表单验证支持ajax判断用户名是否重复的实例:如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持。onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证。 html: <div class=layui-form-item> &
推荐度:
标签: 验证 是否 重复
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top