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 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
vue动态改变背景图片demo分享
Sep 13 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
完美解决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
第四节--构造函数和析构函数
2006/11/16 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
node.js学习总结之调式代码的方法
2014/06/25 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
python生成IP段的方法
2015/07/07 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
Python如何实现单例模式
2016/06/03 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
物流专业求职信
2014/06/30 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
质量保证书
2015/01/17 职场文书
求职自我推荐信
2015/03/24 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书