这两天开始敲代码了,让用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" οnsubmit="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" οnclick="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" οnclick="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\" οnclick=\"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\" οnclick=\"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等等。。。