jsp弹出层 发送手机验证码

最新推荐文章于 2021-10-24 13:48:10 发布
最新推荐文章于 2021-10-24 13:48:10 发布
阅读量234 收藏
点赞数
文章标签： xhtml java javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/minxinxin2010/article/details/84267449
版权 
<%@ 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="#" οnclick="changeCaptchaImage(registForm.codeimg)">换一张</a>
		               	</td>
		             </tr>
		           </table>
		           </div>
		           <div class="box_4_row_3">
				     	<input type="button" id="subButton" value="确 定" class="btn_style_2" οnclick="javascript:registerFrom()"/>
				     	<input type="button" value="重 填" class="btn_style_2" οnclick="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位手机验证码" οnfοcus="javascript:textFocus(this,'请输入6位手机验证码')"
					οnblur="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>

 

minxinxin2010
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹出层短信验证
07-22
通过点击按钮，弹出蒙层，通过输入手机号码，获取验证码，如果手机号码错误，就提示错误，输入正确就倒计时60秒，倒计时时，不可点击。
jsp实现验证码
qq_34222743的博客
05-09 796
jsp实现验证码 一、验证码的生成(jsp) ​ 这里的代码只要复制过去就可以使用 <%@ page language="java" pageEncoding="UTF-8"%> <%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %...
兼容移动端的手机验证码页面jsp+bootstap+jquery
hao_bin的博客
11-04 265
本文项目中需要进行手机验证码验证的页面，现在网址基本上都需要手机实名认证，本人不是前端开发工程师，但临时一个任务，就暂时做了一个页面，给需要这方面需求的人一个demo.页面比较简单，基本的验证都已经做了。需要加工的可以自己加工。 下面的页面的效果图。 ...
web/java/jsp实现发送手机短信验证码和邮箱验证码的注册登录功能
02-23
web/java/jsp实现发送手机短信验证码和邮箱验证码的注册登录功能，博文同步讲解：https://blog.csdn.net/ITBigGod/article/details/87891084
Jsp生成页面验证码的方法[附代码]
烟台-山子的博客
12-07 1175
image.jsp------------------------------生成随机验证码图片的Jsp页面 代码如下： <%@ page contentType="image/jpeg" import="java.awt.*, java.awt.image.*,java.util.*,javax.imageio.*" %> <%! Color getRandColor(int fc,int bc) { Random random = new Random(); if(fc>.
用session做验证码
05-04
在描述中提到了“小窗口框架刷新”，这可能是指在一个iframe或者弹出窗口中实现验证码的刷新功能。这种方式可以让用户在不刷新整个页面的情况下更新验证码，提高用户体验。实现这一功能，可以通过JavaScript或者AJAX...
JAVA上百实例源码以及开源项目
01-03
　Java zip压缩包查看程序，应用弹出文件选择框，选择ZIP格式的压缩文件，可以像Winrar软件一样查看压缩文件内部的文件及文件夹，源码截图如上所示。 Java 数字签名、数字证书生成源码 2个目标文件 摘要:JAVA源码,...
JAVA上百实例源码以及开源项目源代码
12-11
Java zip压缩包查看程序源码 1个目标文件 摘要:Java源码,文件操作,压缩包查看 Java zip压缩包查看程序，应用弹出文件选择框，选择ZIP格式的压缩文件，可以像Winrar软件一样查看压缩文件内部的文件及文件夹，源码...
java开源包1
06-28
它能够在日期输入框后面弹出一个日历。 网页搜索爬虫 BlueLeech BlueLeech是一个开源程序，它从指定的URL开始，搜索所有可用的链接，以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义...
jsp页面完成注册功能（验证码和手机验证码）
qq_45147812的博客
03-30 1173
web项目的开头一般都是登录和注册，有一个看着很强的登录注册页面，就会突然感觉自己有了底气哈哈哈，最近刚完成了一个注册的页面，其中包括了随机产生图片验证码（https://blog.csdn.net/qq_45147812/article/details/105104495），验证码输入正确后发送手机验证码，手机验证码正确后，检查手机号是否被注册过，密码两次输入是否相同，以及只有同意协议才能注册等...
js 生成验证码
11-22
用javascript实现页面验证码，这是一个很好的例子
html5手机验证转盘抽奖弹出提示框代码
11-03
html5手机验证转盘抽奖弹出提示框代码 html5手机验证转盘抽奖弹出提示框代码
java servlet getParameter
killermyth的专栏
02-03 1872
首先，html各种域传值到servlet中都是用的name，与id无关。 html： 选择一个1111 servlet: String strValue = request.getParameter("aaa")获得选中的option的value， 如果html有多个select的name都是aaa的话，可以用 String[] strValues = request.getParameter
JSP网站如何实现短信验证码功能
wushi0822的博客
10-24 701
本文为您提供了JSP语言版本的验证码短信接口对接DEMO示例 //接口类型：互亿无线触发短信接口，支持发送验证码短信、订单通知短信等。 // 账户注册：请通过该地址开通账户 http://user.ihuyi.com/?DKimmu // 注意事项： //（1）调试期间，请使用用系统默认的短信内容：您的验证码是：【变量】。请不要把验证码泄露给其他人。 //（2）请使用 APIID 及 APIKEY来调用接口，可在会员中心获取； //（3）该代码仅供接入互亿无线短信接口参考使用，客户可根据实际需要自行编写；
JSP实现验证码（利用tooltip进行消息提示）
death05的博客
06-28 1481
界面的代码为： <input name="verifyCode" id="verifyCode" class="form-control" style="width:140px;" type="text" placeholder="验证码" /> js代码为（用jQuery实现：） $(
最新web/java/jsp实现发送手机短信验证码和邮箱验证码的注册登录功能（详细）
热门推荐
空空说技术的博客
02-23 3万+
最新web/java/jsp实现发送手机短信验证码和邮箱验证码的注册登录功能（详细） 最近几天有人需要帮忙做一个关于发送验证码的功能，之前没有做过，于是我鼓捣一阵子，记录一下关于web项目中注册登录常用的手机验证码和邮箱验证码的发送。 作为一个演示项目，我没有使用任何框架，用了一个简单的jsp+Servlet，当然用boostrap美化了一下。代码带有注释，非常简单易懂。 一、手机验证码 由于手机...
Web项目中手机注册短信验证码实现的全流程及代码
weixin_34189116的博客
07-24 3683
最近在做只能净化器的后台用户管理系统，需要使用手机号进行注册，找了许久才大致了解了手机验证码实现流程，今天在此和大家分享一下。 我们使用的是榛子云短信平台, 官网地址:http://smsow.zhenzikj.com 我是java开发者，后端使用了springMvc，前端用的是jsp + jquery 短信验证码实现流程 1、构造手机验证码，生成一个6位的随机数字串；2、使用接口向短信平...
jsp页面弹出层弹框
最新发布
05-25
可以使用JavaScript和CSS来实现弹出层弹框。 首先，在HTML页面中创建一个div元素，用于存放弹出层内容，如下所示： ``` <!-- 弹出层内容 --> ``` 然后，使用CSS设置该div的样式，使其隐藏： ``` #popup { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值