欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery ajax MD5實(shí)現(xiàn)用戶注冊(cè)即時(shí)驗(yàn)證功能

 更新時(shí)間：2016年10月11日 14:05:20   投稿：lijiao  
這篇文章主要為大家詳細(xì)介紹了JQuery AJAX MD5實(shí)現(xiàn)用戶注冊(cè)即時(shí)驗(yàn)證功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

實(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實(shí)現(xiàn)選項(xiàng)卡功能（兩種方法）

    本文主要介紹了jQuery兩種方法寫選項(xiàng)卡的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
    2017-03-03
  • jquery實(shí)現(xiàn)下拉框功能效果【實(shí)例代碼】

    jquery實(shí)現(xiàn)下拉框功能效果【實(shí)例代碼】

    下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)下拉框功能效果【實(shí)例代碼】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考
    2016-05-05
  • 12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備

    12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備

    圖片輪播是網(wǎng)站中的常用功能，用于在有限的網(wǎng)頁空間內(nèi)展示一組產(chǎn)品圖片或者照片，同時(shí)還有非常吸引人的動(dòng)畫效果,本文向大家推薦12款實(shí)用的 jQuery 圖片輪播效果插件感興趣的朋友可以了解下哦
    2013-01-01
  • 基于jquery編寫的放大鏡插件

    基于jquery編寫的放大鏡插件

    這篇文章主要為大家詳細(xì)介紹了基于jquery編寫的放大鏡插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-03-03
  • jQueryUI 拖放排序遇到滾動(dòng)條時(shí)有可能無法執(zhí)行排序的小bug及解決方案

    jQueryUI 拖放排序遇到滾動(dòng)條時(shí)有可能無法執(zhí)行排序的小bug及解決方案

    前些日子不是在做使用Jquery-UI實(shí)現(xiàn)一次拖拽多個(gè)選中的元素操作嘛，在持續(xù)完善這個(gè)組件時(shí)遇到了一個(gè)關(guān)于拖放排序的bug。今天就著圖片和代碼重現(xiàn)一下，也順便告訴大家如何解決這個(gè)問題
    2016-12-12
  • 基于JQuery的密碼強(qiáng)度驗(yàn)證代碼

    基于JQuery的密碼強(qiáng)度驗(yàn)證代碼

    密碼強(qiáng)度驗(yàn)證的方式有很多，今天給大家推薦一個(gè)通過JQuery實(shí)現(xiàn)的密碼強(qiáng)度驗(yàn)證控件，只需要很少的代碼便能實(shí)現(xiàn)。
    2010-03-03
  • jQuery定義插件的方法

    jQuery定義插件的方法

    有些WEB開發(fā)者，會(huì)引用一個(gè)JQuery類庫，然后在網(wǎng)頁上寫一寫$("#")，$(".")，寫了幾年就對(duì)別人說非常熟悉JQuery。其實(shí)你只是了解一點(diǎn)皮毛，并不知道其中的道理，下面通過本篇文章給大家介紹jquery定義插件的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧
    2015-12-12
  • jQuery給表格添加分頁效果

    jQuery給表格添加分頁效果

    這篇文章主要為大家詳細(xì)介紹了利用jQuery給表格添加分頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-03-03
  • jquery 入門教程 [翻譯] 推薦

    jquery 入門教程 [翻譯] 推薦

    此文以實(shí)例為基礎(chǔ)一步步說明了jQuery的工作方式?，F(xiàn)以中文翻譯（添加我的補(bǔ)充說明）如下。如有相關(guān)意見或建議請(qǐng) EMAIL 告知?；蛘咴?BLOG中留言。
    2009-08-08
  • jQuery給元素添加樣式的方法詳解

    jQuery給元素添加樣式的方法詳解

    這篇文章主要介紹了jQuery給元素添加樣式的方法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery給元素添加樣式的各種常見操作技巧,需要的朋友可以參考下
    2015-12-12

最新評(píng)論