jQuery ajax MD5实现用户注册即时验证功能


Posted in Javascript onOctober 11, 2016

实际项目中比较常用的(JQuery+AJAX+MD5),属于即时验证,亮点是验证用户是否存在的那一项,具体内容如下

jQuery ajax MD5实现用户注册即时验证功能

具体示例

registe.jsp

<span style="font-size: large;"><%@ page pageEncoding="UTF-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>注册验证</title> 
<script type="text/javascript" src="md5.js"></script> 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<link type="text/css" rel="stylesheet" href="validator.css"></link> 
<script src="formValidator.js" type="text/javascript" charset="UTF-8"></script> 
 
<script type="text/javascript"> 
$(document).ready(function(){ 
 $.formValidator.initConfig({formid:"myform",onerror:function(msg){alert(msg)},onsuccess:function(){ 
 $('#pwd').val(MD5($('#pwd').val())); 
 return true; 
 }}); 
 
 $("#loginname").formValidator({onshow:"请输入用户名",onfocus:"用户名至少3个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputValidator({min:3,max:10,onerror:"你输入的用户名非法,请确认"}) 
 .ajaxValidator({ 
 type : "post", 
 url : "account.do?"+Math.random(), 
 datatype : "text", 
 success : function(data){ 
 if(data==1){ 
 return false; 
 } else{ 
 return true; 
 } 
 }, 
 buttons: $("#lnbtn"), 
 error: function(){alert("服务器没有返回数据,可能服务器忙,请重试");}, 
 onerror : "该用户名存在,请更换用户名", 
 oncorrect:"恭喜你,该用户名可用", 
 onwait : "正在对用户名进行合法性校验,请稍候..." 
 }); 
 $("#pwd").formValidator({onshow:"请输入密码",onfocus:"密码不能为空",oncorrect:"密码合法"}).inputValidator({min:3,empty:{leftempty:false,rightempty:false,emptyerror:"密码两边不能有空符号"},onerror:"密码不能为空,请确认"}); 
 $("#confirm_pwd").formValidator({onshow:"请输入重复密码",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"重复密码两边不能有空符号"},onerror:"重复密码不能为空,请确认"}).compareValidator({desid:"pwd",operateor:"=",onerror:"2次密码不一致,请确认"}); 
 $("#email").formValidator({onshow:"请输入邮箱",onfocus:"邮箱6-100个字符,输入正确了才能离开焦点",oncorrect:"恭喜你,你输对了",defaultvalue:"@"}).inputValidator({min:6,max:100,onerror:"你输入的邮箱长度非法,请确认"}).regexValidator({regexp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onerror:"你输入的邮箱格式不正确"}); 
}); 
 
function submitForm(){ 
 var pwd = document.getElementById('pwd'); 
 pwd.value = MD5(pwd.value); 
 return true; 
} 
</script> 
</head> 
<body> 
<!-- 页头结束 --> 
<!-- 广告栏开始 --> 
<!-- 广告栏结束 --> 
<!-- 主内容开始 --> 
<div id="content"> 
 <!-- 注册栏开始 --> 
 <div class="longBar"> 
 <div class="longTitle">注册新会员</div> 
 <div class="longBody"> 
 <form id="myform" action="account.do?method=registe" method="post"> 
 <table width="100%" border="0" cellspacing="5" cellpadding="5"> 
 <tr> 
 <td width="23%" align="right"><span class="redStar">*</span>会员名:</td> 
 <td width="19%"> 
 <input name="loginname" class="text" type="text" id="loginname" tabindex="1" size="30" maxlength="20" /> 
 <input type="button" value="用户名是否可用" id="lnbtn"/> 
 </td> 
 <td width="58%"><div id="loginnameTip"></div></td> 
 </tr> 
 <tr> 
 <td align="right"><span class="redStar">*</span>密码:</td> 
 <td><input name="pwd" class="text" type="password" id="pwd" tabindex="2" size="30" maxlength="20" /></td> 
 <td><div id="pwdTip"></div></td> 
 </tr> 
 <tr> 
 <td align="right"><span class="redStar">*</span>重复密码:</td> 
 <td><input name="confirm_pwd" class="text" type="password" id="confirm_pwd" tabindex="3" size="30" maxlength="20" /></td> 
 <td><div id="confirm_pwdTip"></div></td> 
 </tr> 
 <tr> 
 <td align="right"><span class="redStar">*</span>邮件地址:</td> 
 <td><input id="email" class="text" tabindex="4" name="email" size="30" type="text" /></td> 
 <td><div id="emailTip"></div></td> 
 </tr> 
 <tr> 
 <td colspan="3" align="right"><div align="center">-------------------------------- 以 下 为 选 填 项 目 ----------------------------------</div></td> 
 </tr> 
 <tr> 
 <td align="right">真实姓名:</td> 
 <td><input id="username" class="text" name="username" tabindex="5" size="30" type="text" /> </td> 
 <td><div id="usernameTip"></div></td> 
 </tr> 
 <tr> 
 <td align="right">联系电话:</td> 
 <td><input id="phone" class="text" name="phone" tabindex="6" size="30" type="text" /> </td> 
 <td><div id="phoneTip"></div></td> 
 </tr> 
 <tr> 
 <td align="right">手机号码:</td> 
 <td><input id="mobile" class="text" name="mobile" tabindex="7" size="30" type="text" /> </td> 
 <td><div id="mobileTip"></div></td> 
 </tr> 
 <tr> 
 <td align="right">通讯地址:</td> 
 <td><input id="address" class="text" name="address" tabindex="9" size="35" type="text" /> </td> 
 <td><div id="addressTip"></div></td> 
 </tr> 
 <tr> 
 <td align="right">邮政编码:</td> 
 <td><input id="zipCode" class="text" name="zipCode" tabindex="10" size="30" type="text" /> </td> 
 <td><div id="zipCodeTip"></div></td> 
 </tr> 
 <tr> 
 <td align="right"></td> 
 <td colspan="2"><input type="submit" class="submit" tabindex="11" value="提交注册"/></td> 
 </tr> 
 </table> 
 </form> 
 </div> 
 </div> 
 <!-- 注册栏结束 --> 
</div> 
<!-- 主内容结束 --> 
<div class="hackBox"></div> 
 
</body> 
</html></span>

AccountServlet.java

<span style="font-size: large;">package com.validator.test; 
 
import java.io.IOException; 
import java.io.PrintWriter; 
 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
 
public class AccountServlet extends HttpServlet { 
 
 
 public void doGet(HttpServletRequest request, HttpServletResponse response) 
 throws ServletException, IOException { 
 this.doPost(request, response); 
 
 } 
 public void doPost(HttpServletRequest request, HttpServletResponse response) 
 throws ServletException, IOException { 
 String loginname=request.getParameter("loginname"); 
 PrintWriter out = response.getWriter(); 
 if(loginname.equals("abc123")){ 
 out.println("1"); 
 }else{ 
 out.println("0"); 
 } 
 out.flush(); 
 
 } 
 
}</span>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
Javascript学习指南
Dec 01 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
修改Vue打包后的默认文件名操作
Aug 12 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 #Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 #Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 #Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 #Javascript
js 判断附件后缀的简单实现方法
Oct 11 #Javascript
判断数组的最佳方法(推荐)
Oct 11 #Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 #Javascript
You might like
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
yii操作cookie实例简介
2014/07/09 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
jquery json 实例代码
2010/12/02 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
PyQt5每天必学之布局管理
2018/04/19 Python
Python实现八皇后问题示例代码
2018/12/09 Python
python实现定时发送qq消息
2019/01/18 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python函数的作用域及关键字详解
2019/08/20 Python
python批量解压zip文件的方法
2019/08/20 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
Unix如何添加新的用户
2014/08/20 面试题
职工运动会邀请函
2014/02/02 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
2014年节能工作总结
2014/12/18 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python
angular异步验证器防抖实例详解
2022/03/31 Javascript
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers