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


Posted in Javascript onNovember 08, 2019

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

一、实现效果:

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

重置这里有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个精彩的专题:

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

Javascript 相关文章推荐
jQuery 加上最后自己的验证
Nov 04 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 #Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 #Javascript
微信小程序select下拉框实现源码
Nov 08 #Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 #Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 #Javascript
vue中在vuex的actions中请求数据实例
Nov 08 #Javascript
vue 组件内获取actions的response方式
Nov 08 #Javascript
You might like
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
js中的replace方法使用介绍
2013/10/28 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
80%应聘者都不及格的JS面试题
2017/03/21 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
印度低票价航空公司:GoAir
2017/10/11 全球购物
网络编辑岗位职责
2014/03/18 职场文书
就业协议书怎么填
2014/09/15 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
数学复习课教学反思
2016/02/18 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
浅析Python中的套接字编程
2021/06/22 Python