jQuery ajax MD5實(shí)現(xiàn)用戶注冊(cè)即時(shí)驗(yàn)證功能
實(shí)際項(xiàng)目中比較常用的(JQuery+AJAX+MD5),屬于即時(shí)驗(yàn)證,亮點(diǎn)是驗(yàn)證用戶是否存在的那一項(xiàng),具體內(nèi)容如下
具體示例
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>注冊(cè)驗(yàn)證</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:"請(qǐng)輸入用戶名",onfocus:"用戶名至少3個(gè)字符,最多10個(gè)字符",oncorrect:"該用戶名可以注冊(cè)"}).inputValidator({min:3,max:10,onerror:"你輸入的用戶名非法,請(qǐng)確認(rèn)"}) .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("服務(wù)器沒有返回?cái)?shù)據(jù),可能服務(wù)器忙,請(qǐng)重試");}, onerror : "該用戶名存在,請(qǐng)更換用戶名", oncorrect:"恭喜你,該用戶名可用", onwait : "正在對(duì)用戶名進(jìn)行合法性校驗(yàn),請(qǐng)稍候..." }); $("#pwd").formValidator({onshow:"請(qǐng)輸入密碼",onfocus:"密碼不能為空",oncorrect:"密碼合法"}).inputValidator({min:3,empty:{leftempty:false,rightempty:false,emptyerror:"密碼兩邊不能有空符號(hào)"},onerror:"密碼不能為空,請(qǐng)確認(rèn)"}); $("#confirm_pwd").formValidator({onshow:"請(qǐng)輸入重復(fù)密碼",onfocus:"兩次密碼必須一致哦",oncorrect:"密碼一致"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"重復(fù)密碼兩邊不能有空符號(hào)"},onerror:"重復(fù)密碼不能為空,請(qǐng)確認(rèn)"}).compareValidator({desid:"pwd",operateor:"=",onerror:"2次密碼不一致,請(qǐng)確認(rèn)"}); $("#email").formValidator({onshow:"請(qǐng)輸入郵箱",onfocus:"郵箱6-100個(gè)字符,輸入正確了才能離開焦點(diǎn)",oncorrect:"恭喜你,你輸對(duì)了",defaultvalue:"@"}).inputValidator({min:6,max:100,onerror:"你輸入的郵箱長(zhǎng)度非法,請(qǐng)確認(rèn)"}).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> <!-- 頁頭結(jié)束 --> <!-- 廣告欄開始 --> <!-- 廣告欄結(jié)束 --> <!-- 主內(nèi)容開始 --> <div id="content"> <!-- 注冊(cè)欄開始 --> <div class="longBar"> <div class="longTitle">注冊(cè)新會(huì)員</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>會(huì)員名:</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>重復(fù)密碼:</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">-------------------------------- 以 下 為 選 填 項(xiàng) 目 ----------------------------------</div></td> </tr> <tr> <td align="right">真實(shí)姓名:</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">聯(lián)系電話:</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">手機(jī)號(hào)碼:</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="提交注冊(cè)"/></td> </tr> </table> </form> </div> </div> <!-- 注冊(cè)欄結(jié)束 --> </div> <!-- 主內(nèi)容結(jié)束 --> <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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實(shí)現(xiàn)選項(xiàng)卡功能(兩種方法)
本文主要介紹了jQuery兩種方法寫選項(xiàng)卡的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03jquery實(shí)現(xiàn)下拉框功能效果【實(shí)例代碼】
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)下拉框功能效果【實(shí)例代碼】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考2016-05-0512款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
圖片輪播是網(wǎng)站中的常用功能,用于在有限的網(wǎng)頁空間內(nèi)展示一組產(chǎn)品圖片或者照片,同時(shí)還有非常吸引人的動(dòng)畫效果,本文向大家推薦12款實(shí)用的 jQuery 圖片輪播效果插件感興趣的朋友可以了解下哦2013-01-01jQueryUI 拖放排序遇到滾動(dòng)條時(shí)有可能無法執(zhí)行排序的小bug及解決方案
前些日子不是在做使用Jquery-UI實(shí)現(xiàn)一次拖拽多個(gè)選中的元素操作嘛,在持續(xù)完善這個(gè)組件時(shí)遇到了一個(gè)關(guān)于拖放排序的bug。今天就著圖片和代碼重現(xiàn)一下,也順便告訴大家如何解決這個(gè)問題2016-12-12