BootstrapValidator验证用户名已存在(ajax)

 更新时间:2019年11月08日 11:10:20   作者:Coder-HaN  
这篇文章主要为大家详细介绍了BootstrapValidator验证用户名已存在,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Java web项目:bootstrap实现注册页面,mvc模式联合mysql数据库检查用户名的唯一性。

一、实现效果:

重置这里有bug,bootstrapValidator验证不能重置,待解决。

二、代码准备:

引入bootstrap,bootstrapValidator和jquery。

<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrap.min.css" rel="external nofollow" />
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/bootstrapValidator.min.css" rel="external nofollow" />
<script src="<%=request.getContextPath() %>/js/jquery.min.js"></script>
<script src="<%=request.getContextPath() %>/js/bootstrap.min.js"></script> 
<script src="<%=request.getContextPath() %>/js/bootstrapValidator.min.js"></script>

三、部分代码:

register.jsp注册部分代码。 

<form id="registerForm" action="<%=request.getContextPath() %>/UserServlet" method="post">
 <input type="hidden" name="method" value="register"/>
 <div class="form-group">
  <label>用户名</label>
  <input type="text" class="form-control" name="userName" placeholder="用户名由2-12位字符组成" />
 </div>

 <div class="form-group">
  <label>邮箱</label>
  <input type="text" class="form-control" name="userEmail" placeholder="邮箱" />
 </div>

 <div class="form-group">
  <label>密码</label>
  <input type="password" class="form-control" name="userPassword" placeholder="密码由6-10位字母数字组成" />
 </div>

 <div class="form-group">
  <label>确认密码</label>
  <input type="password" class="form-control" name="confirmUserPassword" placeholder="再次输入密码" />
 </div>

 <div class="form-group">
  <button type="submit" class="btn btn-primary">注册</button>
  <input type="reset" class="btn btn-primary" value="重置">
 </div>
</form>

利用bootstrapValidator表单验证代码。 ajax部分有详细注释

<script type="text/javascript">
 $(function() {
  $('#registerForm').bootstrapValidator({
   message: 'This value is not valid',
   feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
   },
   fields: {
    userName: {
     message: 'The username is not valid',
     validators: {
      notEmpty: {
       message: '用户名不能为空'
      },
      stringLength: {
       min: 2,
       max: 12,
       message: '用户名由2-12位字符组成'
      },
      threshold: 2,//有2字符以上才发送ajax请求
      remote: {//ajax验证。server result:{"valid",true or false} 
       url: "/ImageShare/UserServlet",
       message: '用户名已存在,请重新输入',
       delay: 1000,//ajax刷新的时间是1秒一次
       type: 'POST',
       //自定义提交数据,默认值提交当前input value
       data: function(validator) {
       return {
        userName : $("input[name=userName]").val(),
         method : "checkUserName"//UserServlet判断调用方法关键字。
        };
       }
      }
     }
    },
    userEmail: {
     validators: {
      notEmpty: {
       message: '邮箱不能为空'
      },
      emailAddress: {
       message: '输入不是有效的电子邮件地址'
      }
     }
    },
    userPassword: {
     validators: {
      notEmpty: {
       message: '密码不能为空'
      },
      stringLength: {
       min: 6,
       max: 10,
       message: '密码由6-10位字符组成'
      },
      identical: {
       field: 'confirmUserPassword',
       message: '密码输入不一致'
      }
     }
    },
    confirmUserPassword: {
     validators: {
      notEmpty: {
       message: '密码不能为空'
      },
      stringLength: {
       min: 6,
       max: 10,
       message: '密码由6-10位字符组成'
      },
      identical: {
       field: 'userPassword',
       message: '密码输入不一致'
      }
     }
    }
   }
  });
 });
</script>

UserServlet.java检查用户名唯一性部分代码。

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 // TODO Auto-generated method stub
 request.setCharacterEncoding("UTF-8");
 //0、获取method判断执行操作
 String method = request.getParameter("method");
 if ("checkUserName".equals(method)) {
 //验证用户名是否已存在
 checkUserName(request,response);
 }
}

//根据用户名称查询,检查用户名称的唯一性(用户注册)
public void checkUserName(HttpServletRequest request, HttpServletResponse response) throws IOException{
 response.setCharacterEncoding("UTF-8");
 //返回json数据,格式为{"valid",true} 表示合法,验证通过。{"valid":false} 表示不合法,验证不通过
 String jsonResult = "";
 String userName = request.getParameter("userName");
 //去数据进行唯一性确认
 if (userName!=null) {
 //服务层service调用数据库访问层dao中的searchUserName方法。
 boolean b = UserServiceImpl.searchUserName(userName);
 if (b) {
 //如果名称存在
 jsonResult = "{\"valid\":false}";
 }else{
 //如果该名称不存在
 jsonResult = "{\"valid\":true}";
 }
 } else {
 jsonResult = "{\"valid\":false}";
 }
 //response把jsonResult打到前台
 response.getWriter().write(jsonResult);
}

四、总结:

1.利用bootstrapValidator的ajax表单验证用户名已存在关键是自定义提交的数据。

2.将当前input的value值和判断操作方法的method关键字提交

3.注意当server必需返回形如:{“valid”,true or false} 的json数据格式

4.servlet通过 response.getWriter().write(jsonResult) 返回响应的内容jsonResult到前台页面。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是关于本文的全部内容,希望对大家的学习有所帮助。

相关文章

  • Javascript 实现的数独解题算法网页实例

    Javascript 实现的数独解题算法网页实例

    此算法的实现,就是模拟人脑的思考和计算过程,有需要的朋友可以参考一下
    2013-10-10
  • JavaScript函数柯里化实现原理及过程

    JavaScript函数柯里化实现原理及过程

    这篇文章主要介绍了JavaScript函数柯里化实现原理及过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-12-12
  • webpack构建打包的性能优化实战指南

    webpack构建打包的性能优化实战指南

    webpack是前端开发中比较常用的打包工具之一,另外还有gulp,grunt,下面这篇文章主要给大家介绍了关于webpack构建打包的性能优化的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • layui框架教程

    layui框架教程

    layui是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,常适合网页界面的快速开发,这篇文章主要介绍了layui框架教程,需要的朋友可以参考下
    2022-09-09
  • JavaScript实现同一页面内两个表单互相传值的方法

    JavaScript实现同一页面内两个表单互相传值的方法

    这篇文章主要介绍了JavaScript实现同一页面内两个表单互相传值的方法,涉及javascript鼠标事件及页面元素赋值操作的相关技巧,需要的朋友可以参考下
    2015-08-08
  • three.js快速入门【推荐】

    three.js快速入门【推荐】

    本文主要介绍了three.js的基础知识。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript实现刷新不重记的倒计时

    JavaScript实现刷新不重记的倒计时

    网上关于JavaScript实现倒计时的文章有很多,但是一般都是刷新后会重新开始计时,可是我们有的时候会需要刷新却不重新计算的倒计时,这该怎么做呢?下面我们一起来看看这种倒计时怎么实现吧。
    2016-08-08
  • 微信小程序中多个页面传参通信的学习与实践

    微信小程序中多个页面传参通信的学习与实践

    刚接触微信小程序,对里面的语法和属性还不怎么了解,最近正在努力学习中,下面这篇文章主要给大家介绍了微信小程序中多个页面传参通信的相关资料,是最近学习的一个内容总结,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-05-05
  • javascript 极速 隐藏/显示万行表格列只需 60毫秒

    javascript 极速 隐藏/显示万行表格列只需 60毫秒

    隐藏表格列 这种方式的效率极低。例如,隐藏一个千行表格的某列,在我的笔记本(P4 M 1.4G,768M内存)上执行需要约 4000毫秒的时间,令人无法忍受。
    2009-03-03
  • ElementPlus Tag标签用法小结

    ElementPlus Tag标签用法小结

    这篇文章主要介绍了ElementPlus Tag标签用法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09

最新评论