<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body οnlοad="checkTime();">
<div align="center">
<div>
<form id="validateForm" action="validate.html">
<div>手机号:<input id="phone" type="text" name="phone" value="" maxlength="11"/></div>
<div>验证码:<input type="text" name="code"><button id="validationCode" type="button" οnclick="sendCode(this);" title="获取验证码">获取验证码</button></div>
<div><button type="button" οnclick="doValidation();" title="提交">提交</button></div>
</form>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function sendCode(obj){
var phone = document.getElementById("phone");
var value = phone.value.trim();
if(value && value.length == 11){
$.ajax({
cache : false,
url : "sendCode.html",
data : {phone : value}
});
// 1分钟内禁止点击
for (var i = 1; i <= 60; i++) {
// 1秒后显示
window.setTimeout("updateTime(" + (60 - i) + ")", i * 1000);
}
}else{
alert("请输入正确的手机号码");
phone.focus();
}
}
function updateTime(i){
// setTimeout传多个参数到function有点麻烦,只能重新获取对象
var obj = document.getElementById("validationCode");
if(i > 0){
obj.innerHTML = "距离下次获取还有" + i + "秒";
obj.disabled = true;
}else{
obj.innerHTML = "获取验证码";
obj.disabled = false;
}
}
function checkTime(){
var sendCodeTime = <%=(Long)session.getAttribute("SEND_CODE_TIME")%>;
if(sendCodeTime){
var nowTime = new Date().getTime();
var flag = Math.floor((nowTime - sendCodeTime)/1000);
if(flag < 60){
var end = 60 - flag;
// 进页面马上开始,选i为0
for (var i = 0; i <= end; i++) {
window.setTimeout("updateTime(" + (end - i) + ")", i * 1000);
}
}
}
}
function doValidation(){
if(validateFormValidateor.form()){
$("#validateForm").ajaxSubmit({
success:function(data){
if(data == "success") {
alert("验证成功");
}else{
alert("验证失败");
}
}
});
}
}
var validateFormValidateor;
$().ready(function(){
validateFormValidateor = $("#validateForm").validate({
rules:{
phone:{
required:true,
number:true,
minlength:11
},
code:"required"
},
messages:{
phone:{
required: "请输入手机号码",
number: "只能输入数字",
minlength: "手机号码为11位"
}
}
});
});
</script>
@Controller
@RequestMapping("/phone")
public class PhoneController {
private static final String VALIDATE_PHONE_CODE = "VALIDATE_PHONE_CODE";
private static final String VALIDATE_PHONE = "VALIDATE_PHONE";
private static final String SEND_CODE_TIME = "SEND_CODE_TIME";
@RequestMapping("index.html")
protected String index() {
return "phone/list";
}
@RequestMapping("sendCode.html")
@ResponseBody
protected void sendCode(String phone, HttpServletRequest request) throws HttpException, IOException {
StringBuilder code = new StringBuilder();
Random random = new Random();
// 6位验证码
for (int i = 0; i < 6; i++) {
code.append(String.valueOf(random.nextInt(10)));
}
HttpSession session = request.getSession();
session.setAttribute(VALIDATE_PHONE, phone);
session.setAttribute(VALIDATE_PHONE_CODE, code.toString());
session.setAttribute(SEND_CODE_TIME, new Date().getTime());
String smsText = "验证码:" + code;
System.out.println("手机号:" + phone + ", " + smsText);
SendMsg_webchinese.sendMessage(phone, smsText);
}
@RequestMapping("validate.html")
@ResponseBody
protected String validate(HttpServletRequest request){
HttpSession session = request.getSession();
String code = (String) session.getAttribute(VALIDATE_PHONE_CODE);
String phone = (String) session.getAttribute(VALIDATE_PHONE);
String inputCode = request.getParameter("code");
String inputPhone = request.getParameter("phone");
if(phone.equals(inputPhone) && code.equalsIgnoreCase(inputCode)){
return "success";
}else{
return "failure";
}
}
}
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import org.apache.commons.httpclient.Header;
import org.apache.commons.httpclient.HttpClient;
import org.apache.commons.httpclient.HttpException;
import org.apache.commons.httpclient.NameValuePair;
import org.apache.commons.httpclient.methods.PostMethod;
public class SendMsg_webchinese {
public static final String UID = "123";
public static final String KEY = "123456";
public static final String SMS_SEND_URI = "http://utf8.sms.webchinese.cn";
public static final String SMS_NUM_URI = "http://sms.webchinese.cn/web_api/SMS/?Action=SMS_Num";
// 发送短信
public static int sendMessage(String phone, String smsText) throws HttpException, IOException{
PostMethod post = new PostMethod(SMS_SEND_URI);
NameValuePair[] data = { new NameValuePair("Uid", UID),
new NameValuePair("Key", KEY),
new NameValuePair("smsMob", phone),
new NameValuePair("smsText", smsText) };
String result = executeMethod(post, data);
System.out.println("发送短信数量:" + result + ",手机号:" + phone + "信息:" + smsText);
post.releaseConnection();
return Integer.parseInt(result);
}
// 获取短信数量
public static int smsNum() throws UnsupportedEncodingException, IOException{
PostMethod post = new PostMethod(SMS_NUM_URI);
NameValuePair[] data = { new NameValuePair("Uid", UID), new NameValuePair("Key", KEY) };
String result = executeMethod(post, data);
System.out.println("短信数量:" + result);
post.releaseConnection();
return Integer.parseInt(result);
}
private static String executeMethod(PostMethod post, NameValuePair[] data) throws HttpException, IOException{
post.addRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
post.setRequestBody(data);
HttpClient client = new HttpClient();
client.executeMethod(post);
Header[] headers = post.getResponseHeaders();
int statusCode = post.getStatusCode();
System.out.println("statusCode:" + statusCode);
for (Header h : headers) {
System.out.println(h.toString());
}
return new String(post.getResponseBodyAsString().getBytes("utf-8"));
}
}
短信发送的包可以在参考里的短信发送连接里下,UID和KEY是在里面注册的。
参考:页面 短信发送 setTimeout参数传递