Java用户注册手机短信验证码校验功能实现
驗證用戶提交的手機短信驗證碼,如果驗證碼錯誤就跳回到當前頁面。在短信驗證碼未填寫或未正確填寫時,就關閉底下注冊按鈕的功能,只有短信驗證碼通過校驗后才打開注冊按鈕的功能。第二種方式是所有輸入項全部填寫完成后一并提交給服務器,服務器統(tǒng)一進行校驗。本例采用第二種方式。
由于后臺短信驗證碼校驗時如果不通過其他的注冊信息沒法成功提交,所以要在CustomerAction類中先將短信校驗這一項默認設置為通過,才能一并獲得提交注冊的信息。
要保證頁面輸入框input中的name值跟后臺的domain類中的屬性的值保持一致。
<div class="signup" ng-app="signupApp" ng-controller="signupCtrl"><div class="col-md-9 signupbox"><form id="customerForm" action="customer_regist.action" method="post" class="form col-md-6"><div class=" form-group"><label for="inputaccount" class="col-sm-3 control-label"><b>*</b>手機號</label><div class="col-sm-8"><input type="text" class="form-control" name="telephone" ng-model="telephone" id="inputaccount" placeholder="請輸入手機號"></div></div><div class="form-group"><label for="inputaccount" class="col-sm-3 control-label"><b>*</b>驗證碼</label><div class="col-sm-5"><input type="text" class="form-control" id="inputaccount" placeholder="請輸入驗證碼" name="checkcode"></div><div class="col-sm-3 song"><!-- 發(fā)送驗證碼按鈕 --><a class="btn btn-default" ng-click="getCheckCode(telephone)" ng-bind="btnMsg"></a></div></div><div class="form-group"><label for="inputaccount" class="col-sm-3 control-label"><b>*</b>密碼</label><div class="col-sm-8"><input type="password" class="form-control" id="inputaccount" placeholder="6-16位數(shù)字或英文字母" name="password"><p class="text-right grey">安全強度:*****</p></div></div><div class="form-group"><label for="inputaccount" class="col-sm-3 control-label"><b>*</b>確認密碼</label><div class="col-sm-8"><input type="password" class="form-control" id="inputaccount" placeholder="6-16位數(shù)字或英文字母"></div></div><div class="form-group"><label for="inputaccount" class="col-sm-3 control-label"><b>*</b>綁定郵箱</label><div class="col-sm-8"><input type="email" class="form-control" id="inputemail" placeholder="請輸入需要綁定的郵箱" name="email"></div></div><div class="form-group"><div class="col-sm-offset-3 col-sm-8 song"><div class="checkbox"><label><input type="checkbox"> 查看并同意<a href="#"> 《速運快遞服務協(xié)議》</a></label></div></div></div><div class="form-group signbtn"><div class="col-sm-offset-3 col-sm-8 song"><a class="btn btn-danger" href="javascript:$('#customerForm').submit();">注冊</a></div></div></form></div>給a標簽中的【注冊】按鈕添加點擊事件,當click時直接提交表單數(shù)據(jù)。
注:在一般的form表單中都會有一個用于提交的input,這個input的type屬性值為submit,所以點擊這個input時就會將form中的數(shù)據(jù)進行提交。本例中考慮到整體的美觀和服務于其他業(yè)務邏輯,并沒有在form中設置這么一個input,因而需要使用原生的js技術將一個普通的a標簽轉(zhuǎn)換成按鈕,然后給該按鈕注冊點擊事件,只要一點擊就提交表單數(shù)據(jù)。
接下來編寫后臺Action代碼,要注意一個問題,因為本例中我使用了webservice技術,在signup.html所在的項目中并沒有一個實體類用來保存前端頁面提交過來的數(shù)據(jù),最終數(shù)據(jù)被提交到了另外一個crm系統(tǒng)crm_management中,因此需要在crm_management系統(tǒng)中提供一個regist的服務,否則用戶注冊的數(shù)據(jù)時沒法保存的。
CustomerAction代碼要點如下:
① 用戶注冊成功后,設置跳轉(zhuǎn)到regist_success.html頁面。
② 校驗短信驗證碼,如果校驗不通過,就跳回到注冊頁面。
③ 需要在@Action中配置兩個結(jié)果集@Result,一個是注冊成功后需要跳轉(zhuǎn)的頁面,一個是注冊失敗后需要跳轉(zhuǎn)的頁面。
④ 使用屬性驅(qū)動接收頁面提交的驗證碼。提供set方法。生成的短信驗證碼已經(jīng)被保存到session中了,不信?!查看代碼中我已經(jīng)編寫了ServletActionContext.getRequest().setAttribute(model.getTelephone,randomCode)來將短信驗證碼保存到session中。
⑤ 直接從session中獲取之前生成的短信驗證碼,因為之前保存驗證碼時使用的是手機號碼作為key,所以可以直接通過手機號來獲取驗證碼。短信驗證碼實際上就是使用RandomStringUtils工具類中的randomNumeric(4)方法生成了一個4位數(shù)的隨機數(shù)字字符串。通過ServletActionContext.getRequest().getSession().getAttribute(model.getTelephone());來獲取短信驗證碼。
⑥ 如果短信驗證碼為空或者不等于我們隨機生成的驗證碼,那么就是校驗失敗,將客戶的頁面跳轉(zhuǎn)到注冊頁面signup.html。直接return INPUT;返回一個input視圖。
⑦ 注冊成功就調(diào)用webservice連接crm來保存用戶的注冊信息。直接return SUCCESS;返回一個SUCCESS視圖。
完整的CustomerAction代碼,包含上例中生成短信驗證碼的業(yè)務代碼:
總結(jié)
以上是生活随笔為你收集整理的Java用户注册手机短信验证码校验功能实现的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: win10系统安装到服务器失败,win1
- 下一篇: 传统 Java 网站如何实现容器化?看看