SSH2框架实现注冊发短信验证码实例

Posted yutingliuyl

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了SSH2框架实现注冊发短信验证码实例相关的知识，希望对你有一定的参考价值。

    这两天開始写程序了，让用SSH2框架，曾经没有接触过Java项目更没有接触过SSH2框架，所以用注冊開始了我Java之旅。后来发现，后台代码挺easy理解的，跟.net的差点儿相同。就是层与层之间的调用，可是前面前台的交互我差非常多，在这里总结一下，顺便跟大家看一下。怎么实现往手机上发送短信验证码的。。

           大家先看看我的界面。

    原图：

     技术分享

    短信验证码错误的界面：

  技术分享

    短信验证码正确的界面：

     技术分享

    以下開始我的界面代码展示（JSP）：

<body >
    <h2 class="titlelog"><br></h2><h2 class="titlelog"><br></h2><h2 class="titlelog">学乐购</h2>
    <p class="advertisement">专门为学生打造的站点</p>
    <div id="panelname" style="margin-left: 500px;width: 800px;">
    	<div id="registername"><p class="userregister">用户注冊</p></div>
    	<form action="register_add.action" onsubmit="return clickregister()">
		<div style="margin-bottom:20px">
			<div>手机号码:</div>
			<input class="easyui-textbox" id="telephonename" name="loginName" data-options="prompt:‘请输入手机号‘,validType:‘mobile‘" style="width: 300px; height: 30px;"">
			<input class="code" type="button" id="btnSendCode" onclick="sendMessage()" value="点击获取手机验证码" />
			<span id="telephonenameTip"></span>
		</div>
		<div style="margin-bottom:20px">
			<div>验证码:</div>
			<input class="easyui-textbox" id="codename" style="width: 300px; height: 30px;">
			<span id="codenameTip"></span>
		</div>
		<div style="margin-bottom:20px">
			<div>密码:</div>
			<input class="easyui-textbox" id="password" name="loginPassword" style="width: 300px; height: 30px;">
			<span id="passwordTip"></span>
		</div>
		<div style="margin-bottom:20px">
			<div>确认密码:</div>
			<input class="easyui-textbox" id="passwordRepeat" style="width: 300px; height: 30px;"  >
			<span id="passwordRepeatTip"></span>
		</div>
		
		<div class="readname">
			<input id="checked" type="checkbox" onclick="arrgement()" checked="checked">
			<span >我已阅读并允许<span class="servicename" id="aree">《学乐购站点服务协议》</span></span>
		</div>
		<div id="zhuce" class="loginname">
				<input class="loginregister" id="loginregister" type="submit" value="注冊 "  />
				<a class="login">已有账号？去登陆</a>
		</div>
		</form>
	</div>
  </body>
   Struts代码：

 <!-- 注冊信息 -->
		<action name="register_*" class="userRegisterAction" method="{1}">
			<result name="test">WEB-INF/jsp/StoreManage/Register.jsp</result>

</action>
  JS代码展示：

//去掉前后空格
function trim(str) {
	var strnew=str.replace(/^\s*|\s*$/g, ""); 
	return strnew;
}

//文本框失去焦点时验证

//密码不能为空
$(function(){
	$("input",$("#password").next("span")).blur(function(){
		var password = $("#password").val();
		
		if(trim(password)==""){
			document.getElementById("passwordTip").innerhtml="<font color=‘red‘>× 密码不能为空</font>"; 
			return false;
		}else {
			document.getElementById("passwordTip").innerHTML="<font color=‘#339933‘>√</font>";
			return true;
		}
	});
})

//确认密码
$(function(){
	$("input",$("#passwordRepeat").next("span")).blur(function(){
		
		var passwordrepeat=$("#passwordRepeat").val();
		var password = $("#password").val();
		
		if(trim(passwordrepeat)=="") {
			document.getElementById("passwordRepeatTip").innerHTML="<font color=‘red‘>× 确认密码不能为空 </font>"; 
			return false;
		}else if(trim(password)!=trim(passwordrepeat)){
			document.getElementById("passwordRepeatTip").innerHTML="<font color=‘red‘>× 两次密码输入必须一致</font>"; 
			return false;
		}else {
			document.getElementById("passwordRepeatTip").innerHTML="<font color=‘#339933‘>√</font>";
			return true;
		}
	});
})

//推断手机号是否已经注冊
$(function(){
	$("input",$("#telephonename").next("span")).blur(function(){
		
		var phonename=$("#telephonename").val();
		var re= /(^1[3|5|8][0-9]{9}$)/;  
		if (trim(phonename) == "") {
			document.getElementById("telephonenameTip").innerHTML = "<font color=‘red‘>× 手机号码不能为空</font>"; 
			return false;
		}else if(trim(phonename) != ""){
			if(!re.test(phonename)){
				document.getElementById("telephonenameTip").innerHTML = "<font color=‘red‘>× 请输入有效的手机号码</font>"; 
				return false;
			}else{
				document.getElementById("telephonenameTip").innerHTML = "<font color=‘red‘></font>";
				$.ajax({
					url:"register_checkLoginname.action",
					data:{phonename:phonename},
					type:"POST",
					dataType:"text",
					success:function(data){
						//alert(data);
						//data = parseInt(data, 10);
						if (data != 0) {
							$("#telephonenameTip").html("<font color=‘red‘>× 该手机号码已被注冊，请又一次输入</font>");
							$("#loginregister").disabled=true;
							return false;
						}else {
							$("#telephonenameTip").html("<font color=‘#339933‘>√</font>");
						}
					}
				});

				return true;
			}
		
		}
		
	});
})

//验证码
$(function(){
	$("input",$("#codename").next("span")).blur(function(){
		var coadename = $("#codename").val();
		
		if(trim(coadename)==""){
			document.getElementById("codenameTip").innerHTML="<font color=‘red‘>× 验证码不能为空</font>";
			return false;
		}else {
			document.getElementById("codenameTip").innerHTML=("<font color=‘#339933‘>√</font>"); 
			return true;
		}
	});
})

//短信验证码
var InterValObj; //timer变量，控制时间  
var count = 60; //间隔函数，1秒运行  
var curCount;//当前剩余秒数  
var code = ""; //验证码  
var codeLength = 6;//验证码长度  
  
function sendMessage(){ 
    curCount = count;  
    var jbPhone = $("#telephonename").val();  
    var jbPhoneTip = $("#telephonenameTip").text();  
    if (jbPhone != "") {  
        if(jbPhoneTip == "√" || jbPhoneTip == "√ 短信验证码已发到您的手机,请查收"){  
            // 产生验证码  
            for ( var i = 0; i < codeLength; i++) {  
                code += parseInt(Math.random() * 9).toString();  
            }  
            // 设置button效果，開始计时  
            $("#btnSendCode").attr("disabled", "true");  
            $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");  
            InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器。1秒运行一次  
            // 向后台发送处理数据  
            $.ajax({  
                type: "POST", // 用POST方式传输  
                dataType: "text", // 数据格式:JSON  
                url: "register_sms.action", // 目标地址  
                data: "jbPhone=" + jbPhone +"&code=" + code,  
                error: function (XMLHttpRequest, textStatus, errorThrown) {   
                      
                },  
                success: function (data){   
                    data = parseInt(data, 10);  
                    if(data == 1){  
                        $("#telephonenameTip").html("<font color=‘#339933‘>√ 短信验证码已发到您的手机,请查收</font>");  
                    }else if(data == 0){  
                        $("#telephonenameTip").html("<font color=‘red‘>× 短信验证码发送失败，请又一次发送</font>");  
                        return false;
                    }else if(data == 2){  
                        $("#telephonenameTip").html("<font color=‘red‘>× 该手机号码今天发送验证码过多</font>");  
                    }  
                }  
            });  
        }  
    }else{  
        $("#telephonenameTip").html("<font color=‘red‘>× 手机号码不能为空</font>");  
    }  
}
  
//timer处理函数  
function SetRemainTime() {  
    if (curCount == 0) {                  
        window.clearInterval(InterValObj);// 停止计时器  
        $("#btnSendCode").removeAttr("disabled");// 启用按钮  
        $("#btnSendCode").val("又一次发送验证码");  
        code = ""; // 清除验证码。假设不清除。过时间后，输入收到的验证码依旧有效  
    }else {  
        curCount--;  
        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");  
    }  
}  
  
$(function(){  
	$("input",$("#codename").next("span")).blur(function(){  
        var SmsCheckCodeVal = $("#codename").val();  
        // 向后台发送处理数据  
        $.ajax({  
            url : "register_checkCode.action",   
            data : {SmsCheckCode : SmsCheckCodeVal},   
            type : "POST",   
            dataType : "text",   
            success : function(data) {  
                data = parseInt(data, 10);  
                if (data == 1) {  
                    $("#codenameTip").html("<font color=‘#339933‘>√</font>");  
                } else {  
                    $("#codenameTip").html("<font color=‘red‘>× 短信验证码有误，请核实后又一次填写</font>");
                    
                }  
            }  
        }); 
        return true;
    });  
});  

//对服务协议按钮做出的推断
function arrgement(){
	if(document.getElementById("checked").checked){
		
		document.getElementById("zhuce").innerHTML="<input class=\"loginregister\" id=\"loginregister\" type=\"submit\" onclick=\"clickregister()\" value=\"注冊 \"  />";
		document.getElementById("loginregister").style.color = "#FFF";
		document.getElementById("loginregister").style.backgroundColor="#60F";
		return true;
	}else {
		
		document.getElementById("zhuce").innerHTML="<input class=\"loginregister\" id=\"loginregister\" type=\"button\"  value=\"注冊 \"  />";
		document.getElementById("loginregister").style.color =="#000000";
		document.getElementById("loginregister").style.backgroundColor="#D5D3CD";
		return false;
	}
}

//点击注冊按钮时做出的推断
function clickregister(){
	//alert("11");
	
	var password = $("#password").val();
	var passwordrepeat=$("#passwordRepeat").val();
	var phonename=$("#telephonename").val();
	var re= /(^1[3|5|8][0-9]{9}$)/; 
	var coadename = $("#codename").val();
	var SmsCheckCodeVal = $("#codename").val();  
	//alert("22");
	var flage = true;
	//密码不能为空
	if(trim(password)==""){
		document.getElementById("passwordTip").innerHTML="<font color=‘red‘>× 密码不能为空</font>";
		if(flage){
			flage = false;
		}
	}else if(trim(password)!=""){
		document.getElementById("passwordTip").innerHTML="<font color=‘#339933‘>√</font>";
		//flage = true;
	}
	
	
	if(trim(passwordrepeat)==""){
		document.getElementById("passwordRepeatTip").innerHTML="<font color=‘red‘>× 确认密码不能为空 </font>"; 
		if(flage){
			flage = false;
		}
	}else if(trim(password)!=trim(passwordrepeat)){
		document.getElementById("passwordRepeatTip").innerHTML="<font color=‘red‘>× 两次密码输入必须一致</font>"; 
		if(flage){
			flage = false;
		}
	}else if(trim(passwordrepeat)!="" && trim(password)==trim(passwordrepeat) ){
		document.getElementById("passwordRepeatTip").innerHTML="<font color=‘#339933‘>√</font>";
		//flage = true;
	}
	
	
	if (trim(phonename) == ""){
		document.getElementById("telephonenameTip").innerHTML = "<font color=‘red‘>× 手机号码不能为空</font>";
		if(flage){
			flage = false;
		}
	}else {
		//alert("11s");
		if(!re.test(phonename)){
			document.getElementById("telephonenameTip").innerHTML = "<font color=‘red‘>× 请输入有效的手机号码</font>"; 
			if(flage){
				flage = false;
			}
		}else {
			//alert("11sssss");
			//alert(ccc);
			$.ajax({
				async : false,
				url:"register_checkLoginname.action",
				data:{phonename:phonename},
				type:"POST",
				dataType:"text",
				success:function(data){
					//alert(data);
					//data = parseInt(data, 10);
					if (data != 0) {
						$("#telephonenameTip").html("<font color=‘red‘>× 该手机号码已被注冊。请又一次输入</font>");
						//$("#loginregister").disabled=true;
						if(flage){
							flage = false;
						}
					}else {
						$("#telephonenameTip").html("<font color=‘#339933‘>√</font>");
						//flage=true;
					}
				}
			});
			
				
		}
	}
	//alert("11sssss");
	
		if(trim(coadename)==""){
			document.getElementById("codenameTip").innerHTML="<font color=‘red‘>× 验证码不能为空</font>"; 
			if(flage){
				flage = false;
			}
		}else {
			document.getElementById("codenameTip").innerHTML=("<font color=‘#339933‘>√</font>"); 
			
			//alert("11sssss");
			$.ajax({  
				async : false,
	            url : "register_checkCode.action",   
	            data : {SmsCheckCode : SmsCheckCodeVal},   
	            type : "POST",   
	            dataType : "text",   
	            success : function(data) {  
	            	//alert(data);
	                //data = parseInt(data, 10);  
	                if (data == 0) {  
	                	$("#codenameTip").html("<font color=‘red‘>× 短信验证码有误，请核实后又一次填写</font>");
	                	if(flage){
	            			flage = false;
	            		}
	                } else {  
	                    $("#codenameTip").html("<font color=‘#339933‘>√</font>");  
	                  // flage=true;
	                }  
	            }  
	        }); 
				//alert("222");
			//if(ddd==false){
			//	return ddd;		
			//}
				
		}
		
	//alert("111");
	
		//推断有没有勾选服务协议
		if(document.getElementById("checked").checked==true){
			
			document.getElementById("zhuce").innerHTML="<input class=\"loginregister\" id=\"loginregister\" type=\"submit\" onclick=\"clickregister()\" value=\"注冊 \"  />";
			document.getElementById("loginregister").style.color = "#FFF";
			document.getElementById("loginregister").style.backgroundColor="#60F";
			//alert("2222");
			//flage = true;
			
		 }else {
		
			document.getElementById("zhuce").innerHTML="<input class=\"loginregister\" id=\"loginregister\" type=\"button\"  value=\"注冊 \"  />";
			document.getElementById("loginregister").style.color =="#000000";
			document.getElementById("loginregister").style.backgroundColor="#D5D3CD";
			if(flage){
				flage = false;
			}
		}
		return flage;
}

    action代码展示：能发送短信肯定是调用了短信平台的接口，否则不可能让你免费发送短信。这里我用的是天下畅通平台的短信接口平台。让他给Java类。URL，userid。account，password等參数。调用就能够了   

@SuppressWarnings("serial")
@Controller
@Scope("prototype")

public class UserRegisterAction extends BaseAction<UserRegisterdomain> {
	
	//短信验证码接口的測试数据（天下畅通平台给參数）
	public static String url = "http://XXXXXXXXXX";
	public static String userid = "XXXXXXXXXX";
	public static String account = "XXXXXXXXX";
	public static String password = "XXXXXXXXXXXXX";
		
	
	private String phonename;
	
	public String getPhonename() {
		return phonename;
	}

	public void setPhonename(String phonename) {
		this.phonename = phonename;
	}

	//注冊-往数据库中加入注冊信息
	public String add(){
		//插入时间
		Date date=new Date();
		//String createTime=new Timestamp(date.getTime()).toString();
		//密码加密后存入数据库
		String md5Digest=DigestUtils.md5Hex(model.getLoginPassword());
		
		//头像
		String headimg="../../../images/默认头像.gif";
		//等级
		String userRank="0";
		//成长值
		Integer userGrowths=0;
		
		//给实体赋值管理员类型和时间，头像，成长值。等级
		model.setUserType(0);
		model.setDatetime(date);
		model.setTouxiang(headimg);
		model.setUserRank(userRank);
		model.setUserGrowths(userGrowths);
		
		//往数据库中进行加入
		userRegisterService.addUserRegister(model);
		
		//显示注冊界面
		return "test";
	}
	
	//推断该手机号码是否已经注冊
	public void checkLoginname() throws Exception{
		
		String result = "0"; 
		//推断该手机号码是否已经注冊
		List<UserRegisterdomain> userlist=userRegisterService.findUser(phonename);
		if(userlist!= null && userlist.size() > 0){
			result = "1";
		}else{
			result = "0";
		}
		PrintWriter out = response.getWriter();
		out.write(result.toString()); 
	}
	
	 
     //验证手机短信是否发送成功 
    public void sms() throws Exception {  
        String result = "0";  
        /** 手机号码 */  
        Object jbPhone=request.getParameter("jbPhone");  
        /** 短信验证码 */  
        Object code = request.getParameter("code");  
        /** 短信验证码存入session(session的默认失效时间30分钟) */  
        session.setAttribute("code", code.toString());  
 
        /** 单个手机号发送短信的方法的參数准备 */  
        // 手机号码  
        String mobilephone = jbPhone.toString();  
        // 短信内容+随机生成的6位短信验证码  
        String content = "【学乐购站点】注冊验证码为:" + code.toString();   
        
            /** 单个手机号发送短信 */  
           if (!sendMessage(url, userid, account, password, mobilephone, content)) {  
                result = "0";// 失败  
            } else {  
                result = "1";// 成功  
                  
                }  
    
        PrintWriter out = response.getWriter();  
        out.write(result.toString()); 
    }  
    
    // 验证短信验证码是否正确 
    public void checkCode() throws Exception{  
        String result = "0";  
        // 获取手动输入的手机短信验证码 
        String SmsCheckCode = (String)(request.getParameter("SmsCheckCode"));   
        // 获取session中存放的手机短信验证码  
        Object code =session.getAttribute("code");  
        try {  
            if(SmsCheckCode != code.toString() && !SmsCheckCode.equals(code.toString())){  
                result = "0";  
            }else{  
                result = "1";  
            }  
        } catch (Exception e) {  
            throw new RuntimeException("短信验证失败", e);  
        }   
        PrintWriter out = response.getWriter();  
        out.write(result.toString());  
    }    
    
//验证手机是否发送成功的方法
 
    public static boolean sendMessage(String url, String userid, String account,
			String password, String checkContent, String mobileNumber) {  
        // 单个手机号码发送  
        try {  
        	String  retObj = SmsClientSend.sendSms(url, userid, account, password,checkContent,mobileNumber);  
        	//System.out.println(retObj);
            if (retObj == "未发送。编码异常") {   
                return false;  
            } else {  
                return true;  
            } 
        } catch (Exception ex) {  
            ex.printStackTrace();   
        }  
        return true;  
    } 
}
    最终花了四天的时间把它搞出来了。给大家看一下验证码的效果。

。


     技术分享

     尽管没怎么做过Java的项目，可是有了.net的基础。上手还是挺快的。由于好多东西都是相通的。名字叫的不一样可是都是实现一样的事情。像Java中的hibernate跟.net中的EF，Struts跟Mvc等等。。。

以上是关于SSH2框架实现注冊发短信验证码实例的主要内容，如果未能解决你的问题，请参考以下文章

安卓ContentObserver模式获取短信用正则自己主动填充验证码

使用 SSM 框架实现发送手机短信验证码

python web框架Flask——手机短信验证码

Android从零单排之免费短信验证

代码实现PHP生成各种随机验证码

java web实现手机短信验证码登录实例