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 相关文章推荐
在JavaScript中遭遇级联表达式陷阱
Mar 08 Javascript
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
js分页工具实例
Jan 28 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
vue 全局环境切换问题
Oct 27 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 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
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
JS实现div居中示例
2014/04/17 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
wxpython 学习笔记 第一天
2009/03/16 Python
python @property的用法及含义全面解析
2018/02/01 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
Python重新加载模块的实现方法
2018/10/16 Python
python爬取指定微信公众号文章
2018/12/20 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
Python进行特征提取的示例代码
2020/10/15 Python
一道SQL存储过程面试题
2016/10/07 面试题
五年后的职业生涯规划
2014/03/04 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
中秋晚会致辞
2015/07/31 职场文书
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
alibaba seata服务端具体实现
2022/02/24 Java/Android