1. 程式人生 > >SSH2框架實現註冊發簡訊驗證碼例項

SSH2框架實現註冊發簡訊驗證碼例項

【原文連線】https://blog.csdn.net/u010539352/article/details/46858189

  這兩天開始敲程式碼了,讓用SSH2框架,以前沒有接觸過Java專案更沒有接觸過SSH2框架,所以用註冊開始了我Java之旅。後來發現,後臺程式碼挺容易理解的,跟.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類,URLuseridaccountpassword等引數。呼叫就可以了

@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;  
    } 
}

   終於花了四天的時間把它搞出來了,給大家看一下驗證碼的效果。。