这两天開始写程序了，让用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等等。。。
