脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery AJAX即时验证

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

 更新时间：2016年10月11日 14:05:20   投稿：lijiao  
这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 得到jQuery detach()后节点中的某个值实现代码

    得到jQuery detach()后节点中的某个值实现代码

    需要jQuery -detach 后的dom 结构或某个值，如何获取到呢？一直困惑着我们，不过本文将为大家解开疑惑，感兴趣的朋友可以了解下，或许本文对你有所帮助
    2013-02-02
  • 30个让人兴奋的视差滚动（Parallax Scrolling）效果网站

    30个让人兴奋的视差滚动（Parallax Scrolling）效果网站

    视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。今天这篇文章就与大家分享30个视差滚动效果的网页设计作品，一起欣赏（以拖动滚动条方式浏览效果更佳）
    2012-03-03
  • JQuery.dataTables表格插件添加跳转到指定页

    JQuery.dataTables表格插件添加跳转到指定页

    这篇文章主要介绍了JQuery.dataTables表格插件添加跳转到指定页的解决方案，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • JQuery实现自定义对话框的代码

    JQuery实现自定义对话框的代码

    JavaScript为我们提供几种对话框功能，但功能都十分有限；虽然在IE下可以通过模式窗体的方式创建更丰富的对话框功能，但毕竟只有IE得到支持。
    2008-06-06
  • jQuery 核心函数以及jQuery对象

    jQuery 核心函数以及jQuery对象

    首先介绍 jQuery 的几个核心函数，在 jQuery 中它们起着至关重要的作用，在实际的前端开发过程中用到最多的也是它们。
    2010-03-03
  • javascript loadScript异步加载脚本示例讲解

    javascript loadScript异步加载脚本示例讲解

    本文讲解了javascript异步加载脚本并触发回调函数的方法，在加载远程数据的时候可以用到，下面提供代码示例和源码
    2013-11-11
  • jquery插件star-rating.js实现星级评分特效

    jquery插件star-rating.js实现星级评分特效

    Bootstrap Star Rating是一个简单而强大的jQuery插件实现星级分数评级。支持像分数星填充和RTL输入先进的功能。在利用纯CSS-3造型使控制重点开发。该插件使用引导标记和造型默认情况下，但它可以覆盖与其他任何CSS的标记。
    2015-04-04
  • jQuery制作图片旋转效果

    jQuery制作图片旋转效果

    本文主要介绍了jQuery制作图片旋转效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • jQuery实现为动态添加的元素绑定事件实例分析

    jQuery实现为动态添加的元素绑定事件实例分析

    这篇文章主要介绍了jQuery实现为动态添加的元素绑定事件,结合实例形式分析了jQuery常见的事件绑定相关操作技巧与注意事项,需要的朋友可以参考下
    2018-09-09
  • jquery ready()的几种实现方法小结

    jquery ready()的几种实现方法小结

    下面是目前本人知道的几种jQuery的ready ()的写法.如果还有其他的写法，望告知
    2010-06-06

最新评论