转:http://blog.csdn.net/sxdtzhaoxinguo/article/details/34437591
近来由
于项目需要,需要用到手机短信验证码的功能,其中最主要的是用到了第三方提供的短信平台接口WebService客户端接口,下面我把我在项目中用到的记录一下,以便给大家提供个思路,由于本人的文采有限,还请大家见谅!
一:首先上几张案例截图,以便大家可以了解一下短信验证码的流程,这里我在做的过程中也参考了很多网站的短信验证码,比如:58同城,汽车之家等。
1.点击获取验证码之前的样式:
2.输入正确的手机号后点击获取验证码之后的样式:
3.如果手机号已经被注册的样式:
4.如果一个手机号一天发送超过3次就提示不能发送:
二:前台的注册页面的代码:reg.jsp
[html]
view plain
copy
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%@taglib prefix="s" uri="/struts-tags"%>
- <%@page import="cn.gov.csrc.base.action.FindAllData"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme() + "://"
- + request.getServerName() + ":" + request.getServerPort()
- + path + "/";
- %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <base href="<%=basePath%>">
- <title>中国证券会证券期货违法违规举报中心-注册</title>
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="This is my page">
- <link rel="shortcut icon" type="image/x-icon" href="<%=request.getContextPath()%>/images/favicon.ico" />
- <link rel="stylesheet" type="text/css"
- href="<%=request.getContextPath()%>/css/main.css">
- <link
- href="<%=request.getContextPath()%>/formValidator1/style/validator.css"
- rel="stylesheet" type="text/css" />
- <style type="text/css">
- button {
- background: #F0F0F0 repeat-x;
- padding-top: 3px;
- border-top : 1px solid #708090;
- border-right: 1px solid #708090;
- border-bottom: 1px solid #708090;
- border-left: 1px solid #708090;
- width: auto;
- line-height: 12pt;
- font-size : 10pt;
- cursor: hand;
- font-size: 10pt;
- border-top: 1px solid #708090;
- }
- </style>
- <script src="<%=request.getContextPath()%>/js/jquery-1.7.2.min.js"
- type="text/javascript"></script>
- <script src="<%=request.getContextPath()%>/formValidator1/formValidator-4.0.1.js"
- type="text/javascript"></script>
- <script src="<%=request.getContextPath()%>/formValidator1/formValidatorRegex.js"
- type="text/javascript"></script>
- <script src="<%=request.getContextPath()%>/js/register.js"
- type="text/javascript"></script>
- <script src="<%=request.getContextPath()%>/js/sms.js"
- type="text/javascript"></script>
- <script type="text/javascript">
- function changeCheckNum() {
- var checkNumImage_ = document.getElementById("checkNumImage");
- checkNumImage_.src = "${pageContext.request.contextPath}/image.jsp?timeStamp="+ new Date().getTime();
- }
- </script>
- <script type="text/javascript">
- var msg = "${message}";
- if (msg != "") {
- alert(msg);
- }
- </script>
- </head>
- <body>
- <%@include file="/statics/top.jspf"%>
- <div class="center_division">
- <div class="center_body">
- <div class="center_menu">
- <font color="#000000">当前位置:</font>
- <a href="<%=request.getContextPath()%>/statics/reg.jsp"><font color="#000000">用户注册</font></a>
- </div>
- </div>
- <div class="center_body_menu">
- <s:form action="RegisterAction_register" id="form1" name="form1" method="post" namespace="/">
- <table id="tb">
- <tr>
- <td colspan="3" align="center" bgcolor="#DDDFE1">举报人基本信息</td>
- </tr>
- <tr>
- <td align="center" width="30%"> <img src="images/new_reg_xing.gif"/>用户名:</td>
- <td align="center" width="40%">
- <s:textfield name="username" id="username" cssStyle="width:160px;height:24px;" onblur="checkusername()"/>
- </td>
- <td align="left" width="30%">
- <span id="usernameTip">
- <s:fielderror cssStyle="color:red;padding-left:10px;">
- <s:param>username</s:param>
- </s:fielderror>
- </span>
- </td>
- </tr>
- <tr>
- <td align="center" width="30%"><img src="images/new_reg_xing.gif"/>登录密码:</td>
- <td align="center" width="40%">
- <s:password name="password" id="password" cssStyle="width:160px;height:24px;" onblur="checkpassword()"/>
- </td>
- <td align="left" width="30%">
- <span id="passwordTip">
- <s:fielderror cssStyle="color:red;padding-left:10px;">
- <s:param>password</s:param>
- </s:fielderror>
- </span>
- </td>
- </tr>
- <tr>
- <td align="center" width="30%"><img src="images/new_reg_xing.gif"/>确认密码:</td>
- <td align="center" width="40%">
- <s:password name="passwordRepeat" id="passwordRepeat" cssStyle="width:160px;height:24px;" onblur="checkpasswrodb()"/>
- </td>
- <td align="left" width="30%">
- <span id="passwordRepeatTip">
- <s:fielderror cssStyle="color:red;padding-left:10px;">
- <s:param>passwordRepeat</s:param>
- </s:fielderror>
- </span>
- </td>
- </tr>
- <tr>
- <td align="center" width="30%"><img src="images/new_reg_xing.gif"/>姓 名:</td>
- <td align="center" width="40%">
- <s:textfield name="nickname" id="nickname" cssStyle="width:160px;height:24px;" onblur="checknickname()"/>
- </td>
- <td align="left" width="30%">
- <span id="nicknameTip">
- <s:fielderror cssStyle="color:red;padding-left:10px;">
- <s:param>nickname</s:param>
- </s:fielderror>
- </span>
- </td>
- </tr>
- <tr>
- <td align="center" width="30%">性 别:</td>
- <td align="center" width="40%">
- <s:radio list="#application.dataMap.get('10001')" name="jbSex" cssStyle="height:24px;"/>
- </td>
- <td align="left" width="30%"></td>
- </tr>
- <tr>
- <td align="center" width="30%">联系地址:</td>
- <td align="center" width="40%">
- <s:textfield name="jbAddress" id="jbAddress" cssStyle="width:160px;height:24px;" />
- </td>
- <td align="left" width="30%">
- <span id="jbAddressTip">
- <s:fielderror cssStyle="color:red;padding-left:10px;">
- <s:param>jbAddress</s:param>
- </s:fielderror>
- </span>
- </td>
- </tr>
- <tr>
- <td align="center" width="30%"><img src="images/new_reg_xing.gif"/>联系手机:</td>
- <td align="center" width="40%">
- <s:textfield id="jbPhone" name="jbPhone" cssStyle="width:160px;height:24px;" onblur="checkjbPhone()"/>
- </td>
- <td align="left" width="30%">
- <span id="jbPhoneTip">
- <s:fielderror cssStyle="color:red;padding-left:10px;">
- <s:param>jbPhone</s:param>
- </s:fielderror>
- </span>
- </td>
- </tr>
- <tr>
- <td align="center"><img src="images/new_reg_xing.gif"/>短信验证码:</td>
- <td align="left" colspan="2" style="padding-left: 112px;">
- <s:textfield id="SmsCheckCode" name="SmsCheckCode" cssStyle="width:80px;height:24px;" maxLength="6" />
- <span><input type="button" id="btnSendCode" name="btnSendCode" value="免费获取验证码" onclick="sendMessage()" /></span>
- <span id="SmsCheckCodeTip">
- <s:fielderror cssStyle="color:red;padding-left:10px;">
- <s:param>SmsCheckCodeTip</s:param>
- </s:fielderror>
- </span>
- </td>
- </tr>
- <tr>
- <td align="center" width="30%"><img src="images/new_reg_xing.gif"/>证件类型:</td>
- <td align="center" width="40%">
- <s:select list="#application.dataMap.get('10002')" label=""
- headerKey="" headerValue="--请选择--" value="1" listValue="value" onchange="enableCredentialsCode(this)"
- name="jbCredentialsName" id="jbCredentialsName" cssStyle="width:160px;height:24px;"/>
- </td>
- <td align="left" width="30%">
- <s:fielderror cssStyle="color:red;padding-left:10px;">
- <s:param>jbCredentialsName</s:param>
- </s:fielderror>
- </td>
- </tr>
- <tr>
- <td align="center" width="30%"><img src="images/new_reg_xing.gif"/>证件号码:</td>
- <td align="center" width="40%">
- <s:textfield name="jbCredentialsCode" id="jbCredentialsCode" cssStyle="width:160px;height:24px;" onblur="checkjbCredentialsCode()"/>
- </td>
- <td align="left" width="30%">
- <span id="jbCredentialsCodeTip">
- <s:fielderror cssStyle="color:red;padding-left:10px;">
- <s:param>jbCredentialsCode</s:param>
- </s:fielderror>
- </span>
- </td>
- </tr>
- <tr>
- <td align="center" width="30%">单位名称:</td>
- <td align="center" width="40%">
- <s:textfield name="jbCompanyName" id="jbCompanyName" cssStyle="width:160px;height:24px;" />
- </td>
- <td align="left" width="30%">
- <span id="jbCompanyNameTip">
- <s:fielderror cssStyle="color:red;padding-left:10px;">
- <s:param>jbCompanyName</s:param>
- </s:fielderror>
- </span>
- </td>
- </tr>
- <tr>
- <td align="center" width="30%"><img src="images/new_reg_xing.gif"/>所在地区:</td>
- <td align="center" width="40%">
- <s:select list="#application.dataMap.get('10003')" label=""
- headerKey="" headerValue="--请选择--" listKey="key"
- cssStyle="width:160px;height:24px;" listValue="value" id="jbSourceArea"
- name="jbSourceArea" onblur="checkjbSourceArea()"/>
- </td>
- <td align="left" width="30%">
- <span id="jbSourceAreaTip">
- <s:fielderror cssStyle="color:red;padding-left:10px;">
- <s:param>jbSourceArea</s:param>
- </s:fielderror>
- </span>
- </td>
- </tr>
- <tr>
- <td align="center" width="30%"> <img src="images/new_reg_xing.gif"/>验证码:</td>
- <td align="center" width="40%">
- <s:textfield id="checkNum" name="checkNum" cssStyle="width:60px;height:24px;" onblur="checkNumber()" maxLength="4"/>
- <img id="checkNumImage" src="${pageContext.request.contextPath}/image.jsp">
- <a onClick="changeCheckNum()" title="点击换一张" style="cursor:hand;"> 换一张</a>
- </td>
- <td align="left" width="30%">
- <span id="checkNumTip">
- <s:fielderror cssStyle="color:red;padding-left:10px;">
- <s:param>checkNumTip</s:param>
- </s:fielderror>
- </span>
- </td>
- </
本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了,原文地址《Java调用WebService接口实现发送手机短信验证码功能,java 手机验证码,WebService接口调用》
还没有人抢沙发呢~