jsp弹出层发送手机验证码

minxinxin2010
浏览: 65819 次
性别:
来自: 成都
最近访客更多访客>>

xx5333
cao348922336
lhldyf
wssc198765
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/jsp/common.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>会员注册</title>
	<link rel="stylesheet" type="text/css" href="<c:url value="/css/confirm.css"/>" />
	<script language="Javascript" src="<c:url value="/js/codeTableSelect.js"/>"></script>
	<script type="text/javascript" src="<c:url value="/js/validation.js"/>"></script> 
	<script language="Javascript" src="<c:url value="/js/jquery.simplemodal.js"/>"></script>
	<script language="Javascript" src="<c:url value="/js/quotedprice_city.js"/>"></script> 
	<script language="Javascript" src="<c:url value="/js/main.js"/>"></script>
	<script language="Javascript" src="<c:url value='/js/sendMobileCode.js' />"></script>  
	<style type="text/css">
			select{background:#ffffff;border:solid 1px #B9B9B9;color:#aaaaaa;font-size:12px; padding:3px;}
	</style>
	<script type="text/javascript">
		function changeCaptchaImage(imgObj) {
			var timestamp = Date.parse(new Date());
			imgObj.src = '<c:url value="/captchaImage.screen"/>?timestamp=' + timestamp;
		}
		
		function register(form){
			try {
				var flag = validation(form.memberEmail, "邮箱","s",1,40) && validation(form.memberEmail, "请填写正确的邮箱格式","m4")
							&& validation(form.memberMobile,"手机号","m1") && validation(form.memberName, "姓名","s2",1,20)
				 			&& checkSelect(form.cityCode,'所在城市') 	&& checkemail(form.memberEmail) 
				 			&& validation(form.memberPassword, "密码","s",1,0) && validation(form.memberPassword1, "再次输入密码","s",1,0) 
				 			&& validation(form.verifycode, "验证码","s",1,4);
				if(flag) {
					var pwd1 = form.memberPassword.value;
					var pwd2 = form.memberPassword1.value;
					if(pwd1 != pwd2) {
						alert("两次输入的密码不一致，请重新输入！");
						form.memberPassword.focus();
						return false;
				}
				if(pwd1.length > 16) {
					alert("输入的密码长度大于16位，请重新输入！");
					form.memberPassword.focus();
					return false;
				}
				if(pwd1.length < 6) {
					alert("输入的密码小于6位，请重新输入！");
					form.memberPassword.focus();
					return false;
				}
				var t = Evaluate(pwd1);
				if(t*1 < 2) {
					alert("为了您的账号安全，请使用字母/数字/特殊符号的组合密码！");
					form.memberPassword.focus();
					return false;
				}
				return true;
			}
				return false;
			}catch(e){
				return false;
			}
		}
		
		function Evaluate(s){
			var ls = 0;
			if((s.match(/([a-z])+/))||(s.match(/([A-Z])+/)))   
			    ls++;   
			if(s.match(/([0-9])+/))  
			    ls++;     
			 if(s.match(/[^a-zA-Z0-9]+/))   		  
			       ls++;   
			 return ls   
			  
			//return word.replace(/^(?:([a-z])|([A-Z])|([0-9])|(.)){6,}|(.)+$/g, "$1$2$3$4$5").length;
		}   
						
		
		
		function checkClick() {
			var subBut = document.getElementById("subButton");
			var checkBox = document.getElementById("checkBox");
			
			if(checkBox.checked) {
				subBut.disabled = false;
				subBut.style.cursor = "hand";
			}else{
				subBut.disabled = true;
				subBut.style.cursor = "default";
			}
		}
		
		function resetForm() {
			var subBut = document.getElementById("subButton");
			var checkBox = document.getElementById("checkBox");
			
			if(checkBox.checked) {
				subBut.disabled = true;
				subBut.style.cursor = "default";
			}
			var form = document.forms[0];
			form.reset();
		}
		
		function showconfirm(){
			
				document.getElementById("mobile").value = document.getElementById("memberMobile").value;
				document.getElementById("mobile").style.background="#cccccc"
					
				confirm("", function(){});
			
		}
		
		function confirm(message, callback) {
			$('#confirm').modal({
				closeHTML:"<a href='#' title='Close' class='modal-close'>x</a>",
				position: ["10%",],
				overlayId:'confirm-overlay',
				containerId:'confirm-container', 
				onShow: function (dialog) {
					$('.message', dialog.data[0]).append(message);
					$('.yes', dialog.data[0]).click(function () {
						if ($.isFunction(callback)) {
							callback.apply();
						}
						checkCode(document.getElementById("registForm"),'<c:url value="/checkMobilecode.do" />','<c:url value="/memberInfo/register.registerSuc.do" />');
					});
				}
			});
		}
		
		function alertMsg(msg) {
			if (msg != null && msg != "") {
				alert(msg);
				return;
			}
		}
	</script>
	<script type="text/javascript">
		function registerFrom(){
			
			var registform=	document.getElementById("registForm");
			var flag = register(registform);
			if(flag){
				registform.action= "<c:url value='/memberInfo/register.do' />";
				registform.submit();
			}else{
				return false;
			}
		}
	</script>
	
</head>

<body>
	<div class="pleft">
        <div class="plbox">
        	<h2><span class="title">会员注册</span></h2>
          	<div class="plcon clearfix">
				<form method="post" name="registForm" id="registForm">
					<div class="box_4_row_2">
					<table width="100%" border="0" cellspacing="1" cellpadding="0" style="margin:auto">
		              <tr>
		               <td class="table_1_subject">账号/E-mail：</td>
		               <td class="table_1_value"><input name="memberEmail" type="text" value="<c:out value='${memberInfoDTO.memberEmail }' />" class="input_style_1" />
		               	请使用您的真实邮件地址，方便获取最新优惠信息
		               </td>
		             </tr>
		             <tr>
		               <td class="table_1_subject">密码：</td>
		               <td class="table_1_value"><input id="memberPassword" name="memberPassword" type="password" value="" class="input_style_1" />
		          	   	 6~16个字符，请使用字母/数字/特殊符号组合
		          	   </td>
		             </tr>
		             <tr>
		               <td class="table_1_subject">确认密码：</td>
		               <td class="table_1_value"><input id="memberPassword1" name="memberPassword1" type="password" value="" class="input_style_1" />
		               </td>
		             </tr>		             
		             <tr>
		               <td class="table_1_subject" width="25%">手机号：</td>
		               <td class="table_1_value" width="75%">
		               	 <input class="input_style_1" id="memberMobile" name="memberMobile" type="text" value="<c:out value='${memberInfoDTO.memberMobile }' />"/>
		               </td>
		             </tr>
		             <tr>
		               <td class="table_1_subject">姓名：</td>
		               <td class="table_1_value"><input id="memberName" name="memberName" type="text" value="<c:out value='${memberInfoDTO.memberName }' />" class="input_style_1" />
		               </td>
		             </tr>
		             <tr>
		               <td class="table_1_subject">所在省/市：</td>
		               <td class="table_1_value">
		                   	 <select id="prov" name="prov" style="height: 24px;">
							    <option value="" selected="selected">--请选择省份--</option>
							 </select>&nbsp;/&nbsp;
				             <select id="cityCode" name="cityCode" style="height: 24px;">
							    <option value="" selected="selected">--请选择城市--</option>		
							 </select>
							 <script type="text/javascript">
							 	createProvSelect("<c:out value='${pageContext.request.contextPath}' />", "companycode=y&online=y", "");
			                    setCityOption("<c:out value='${memberInfoDTO.cityCode}' />");
							 </script>
		               </td>
		             </tr>
		             <tr>
		               <td class="table_1_subject">验证码：</td>
		               <td class="table_1_value">
					       <input id="verifycode" name="verifycode"  class="input_style_1" type="text" style="width: 100px;"/>
					       <img name="codeimg" src="<c:url value="/captchaImage.screen"/>" width="55" height="18" align="absmiddle" /><a href="#" onclick="changeCaptchaImage(registForm.codeimg)">换一张</a>
		               	</td>
		             </tr>
		           </table>
		           </div>
		           <div class="box_4_row_3">
				     	<input type="button" id="subButton" value="确 定" class="btn_style_2" onclick="javascript:registerFrom()"/>
				     	<input type="button" value="重 填" class="btn_style_2" onclick="javascript:document.forms[0].reset();" />
				   </div>
				</form>
			</div>
			<div class="plbot"></div>
	  	</div>
	</div>


<!-- 弹出手机验证码页面 -->
<div id="confirm">
	<div class="header"><span>填写手机验证码</span></div>
	<p class="message">请输入手机验证码</p>

	<div class="sendzone">
		<div class="lz_row_2">
		   <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin:auto">
             <tr>
               <td class="table_1_subject" style="width:80px;">手机号：</td>
               <td class="table_1_value"><input type="text"  value="" id="mobile" name="mobile" /></td>
             </tr>
             <tr>
               <td class="table_1_subject" style="width:80px;">验证码：</td>
               <td class="table_1_value" ><input type="text" id="mobileCode" value="请输入6位手机验证码" onfocus="javascript:textFocus(this,'请输入6位手机验证码')"
					onblur="javascript:textBlur(this,'请输入6位手机验证码')" /><a href="javascript:sendAgain('<c:url value="/memberInfo/register.sendMoblieCode.do"/>',document.getElementById('mobile').value)" id="sendAgainHrefId">&nbsp;获取验证码</a><span id="left"></span><span id="sendAgainIndex"></span><span id="right"></span></td>
             </tr>
           </table>
   			</div>
	</div>
	<div class="buttons">
		<div class="no simplemodal-close">关闭</div><div class='yes'>确定</div>
	</div>
</div>
</body>
</html>
分享到：