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

2024-11-28 14:01:31

实际项目中比较常用的(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示例

复制代码代码如下: <html> <head> <title>登录</title> <script type="text/javascript" src="./jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $(".text_login").focus(function(
jQuery判断密码强度实现思路及代码

复制代码代码如下: <head> <title></title> <script src="jquery-1.9.1.js" type="text/javascript"></script> <style type="text/css"> .qiang{background:url(/images/pas4.JPG) no-repeat;width:150px;height
PHP结合jQuery实现找回密码

通常所说的密码找回功能不是真的能把忘记的密码找回,因为我们的密码是加密保存的,一般开发者会在验证用户信息后通过程序生成一个新密码或者生成一个特定的链接并发送邮件到用户邮箱,用户从邮箱链接到网站的重置密码模块重新设置新密码. 当然现在有的网站也有手机短信的方式找回密码,原理就是通过发送验证码来验明正身,和发送邮件验证一样,最终还是要通过重置密码来完成找回密码的流程. 一般步骤是: 1.表单输入注册时的邮箱: 2.验证用户邮箱是否正确,如果用户邮箱不存在网站的用户表中,则提示用户邮箱未注册: 3.发
jquery判断输入密码两次是否相等

Jquery easyui是一个非常好的ui框架,但是表单验证中没有最常用的判断两个输出框中值相等的验证,所以我做了下扩展. $.extend($.fn.validatebox.defaults.rules, { /*必须和某个字段相等*/ equalTo: { validator:function(value,param){ return $(param[0]).val() == value; }, message:'字段不匹配' } }); 使用示例: 密码: <input id="p
jquery密码强度校验

本文实例讲述了jquery密码强度校验的验证代码,分享给大家供大家参考.具体如下: 预想的效果截图如下: 关键代码: <script> //下面的正则表达式建议各位收藏哦,项目上有可能会用得着 $(function(){ $('#pass').blur(function(e) { // alert('---------'); //密码为八位及以上并且字母数字特殊字符三项都包括 var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=
基于JQuery的密码强度验证代码

因为是基于JQuery的控件,当然需要JQuery库,还要一个本控件的JS.JQuery的JS大家可以到官网下载:http://code.jquery.com/jquery-1.4.2.min.js 这个控件的JS文件:password_strength_plugin.js password_strength_plugin.js 复制代码代码如下: (function($){ $.fn.shortPass = 'Too short'; $.fn.badPass = 'Weak'; $.f
jQuery MD5加密实现代码

$(md("你想要加密的字符串")); md5插件下载地址:http://xiazai.jb51.net/201003/yuanma/jquery_md5.rar 下面是我的简单例子复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
jQuery随机密码生成的方法

本文实例讲述了jQuery随机密码生成的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: $.extend({ password: function (length, special) { var iteration = 0; var password = ""; var randomNumber; if(special == undefined){ var special = false; } w
jQuery插件passwordStrength密码强度指标详解

passwordStrength插件能够根据用户输入的密码,以图形化方式显示密码的强度. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>passwordStrength</title> <link href="css/style.css" rel=
jquery插件开发之实现md5插件

方法返回的是一串十进制数,在jquery1.9.2下测试通过. 复制代码代码如下: (function($){ $.md5 = function(o) { if(null === o) { return 'null'; } if(typeof o != "string") { return 'null'; } //计算填充的长度 var fill_data_len = 0; var data_len = o.length; var d_l_mod = data
jQuery实现密保互斥问题解决方案

密保互斥问题: 密保通常都会有n个问题,让用户选择其中2.3个,而且都不会让用户选择重复的问题.这就要求密保互斥. 效果如下: 下面我用了jquery实现密保互斥,用于解决密保,投票等类似互斥问题,可以支持ie6+,火狐,谷歌,opera等大多数浏览器 demo下载:http://download.csdn.net/download/cwqcwk1/5956141 关键代码: 复制代码代码如下: <script type="text/javascript"> var qO
jQuery简单实现MD5加密的方法

本文实例讲述了jQuery简单实现MD5加密的方法.分享给大家供大家参考,具体如下: 1.问题背景有两个输入框,一个输入明文,另一个输入框显示密文 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery实现MD5加密</title> <script type="text/javascript"
jQuery实现提示密码强度的代码

如何实现色条随输入密码长度变化效果: 在很多网站注册页面都有这样的功能,当用户输入密码的时候,下面会出现一个色条,色条的长度会跟随输入密码的长度变化,并且色条的颜色也会根据输入密码长度的不同有所改变,一般是用来提示密码强度.下面就简单介绍一下使用jQuery如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我们</tit

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

相关推荐

随机推荐