当我们登录的时候，可能需要我们填写一下数字验证
我们生成一个四位的数字的方法：
/**
* 数字验证
*/
public void getPic() throws IOException {
int w = 120;
int h = 50;
BufferedImage img = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
//在图片上画一个矩形当背景
Graphics g = img.getGraphics();
g.setColor(new Color(245, 245, 245));
g.fillRect(0, 0, w, h);
String str = "0123456789";
String resultStr = "";
for (int i = 0; i < 4; i++) {
g.setColor(new Color(r(50, 180), r(50, 180), r(50, 180)));
g.setFont(new Font("黑体", Font.PLAIN, 40));
char c = str.charAt(r(0, str.length()));
resultStr += String.valueOf(c);
g.drawString(String.valueOf(c), 10 + i * 30, r(h - 30, h));
}
session.put("imgCode",resultStr);
ImageIO.write(img, "png", response.getOutputStream());
}
public static Random random = new Random();
public static int r(int min, int max) {
int num = 0;
num = random.nextInt(max - min) + min;
return num;
}
发送短信验证码：
/**
* 发送短信验证码
*/
public String sendPickupCode() throws Exception {
String info="2"; //请求失败
try {
if(mobile!=null && !"".equals(mobile.trim())) {
String imgCode = (String)session.get("imgCode");//获取图片验证码
if(verinumber!=null && !"".equals(verinumber.trim()) && verinumber.equals(imgCode)) {
String captcha = RandomStringUtils.randomNumeric(6);
String url = BlockAttribute.duanxinUrl+"sms/send";
String content=captcha+"";
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.APPLICATION_JSON_UTF8);
JSONObject params = new JSONObject();//请求参数
params.put("mobile", mobile);
params.put("content", content);
params.put("appName", "od");
params.put("businessCase","login");
params.put("terminal", "h5");
session.put("statusCode",captcha);
HttpEntity<String> request = new HttpEntity<>(params.toJSONString(), headers);
//发送HTTP请求
ResponseEntity<String> response = restTemplate.postForEntity(url, request, String.class);
if (response != null) {
if (response.getStatusCode().equals(HttpStatus.OK)) {
info="1";
}
}
}else{
info="2";
}
}
} catch (Exception e) {
info="2";
e.printStackTrace();
}
this.response.setContentType("text/html;charset=GBK");
this.response.getWriter().print(info);
return null;
}
我们的页面的调用：
<head>
<title></title>
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/alertPopShow.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/setFont.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/alert.css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/reset.css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/user-center.css">
<script>
$(function(){
var imgSrc='<%=request.getContextPath()%>/UserAction!getPic.action?t='+Date.now();
$(".btn").attr("src",imgSrc);
$(".getmsg").click(function(){
if($(".tel").val()==""){
webToast("请输入有效的手机号","middle",2000);
$(".tel").focus();
return false;
}
var tel=/^1[3458][0-9]{9}$/;
if(!tel.test($(".tel").val())){
webToast("请填写正确的手机号","middle",2000);
return false;
}
var urlPh = '<%=request.getContextPath()%>/UserAction!isBinded.action';
$.post(urlPh,{"mobile":$.trim($("#mobile").val())},function(data){
if(data=="true"){
webToast("您已经绑定过其他微信号","middle",2000);
}else{
$(".getmsg").hide();
$(".sytime").show().html("60s");
timed();
//发送短信
$.ajax({
type:"post",
url:"<%=request.getContextPath()%>/UserAction!sendPickupCode.action",
dataType: "json",
data:{"verinumber":$.trim($("#verinumber").val()),"mobile":$.trim($("#mobile").val())},
success:function(data){
if(data!="1"){
webToast("您输入的数字验证有误","middle",2000);
}
}
});
}
});
})
//登录
$(".login-btn").click(function(){
if($(".sign").val()=="" || $(".tel").val()=="" || $(".code").val()==""){
webToast("手机号和验证码不能为空","middle",2000);
return false;
}
//判断验证码是否正确
var verinumber=$("#verinumber").val();
var duanxinum=$("#duanxinum").val();
$.ajax({
type:"post",
url:"<%=request.getContextPath()%>/UserAction!validateNum.action",
dataType: "json",
data:{"verinumber":verinumber,"duanxinum":duanxinum},
success:function(data){
if(data=="1"){
webToast("您输入的数字验证有误","middle",2000);
}else if(data=="2"){
document.forms[0].action="<%=request.getContextPath()%>/UserAction!login.action";
document.forms[0].submit();
}else if(data=="3"){
webToast("您输入的短信验证有误","middle",2000);
}
}
});
})
})
function timed() {
var i = 59;
var time1=null;
time1=setInterval(function(){
if(i == 0) {
$(".getmsg").show().html("重新获取");
$(".sytime").hide();
window.clearInterval(time1);
}
document.querySelector('.sytime').innerHTML = i--+"s";
},1000);
};
</script>
</head>
<body>
<div class="opacity">
<s:form name="logon" action="UserAction!login" method="post" namespace="/m">
<ul class="login">
<li>
<i></i>
<input class="sign" type="text" id="verinumber" placeholder="请输入数字验证"/>
<img class="btn" src="" alt="">
</li>
<li>
<i></i>
<input class="tel" type="tel" name="bindWxUser.mobile" id="mobile" placeholder="请填写手机号"/>
<button type="button" class="getmsg">获取验证码</button>
<button type="button" class="sytime" style="display: none;">60s</button>
</li>
<li>
<i></i>
<input class="code" type="text" id="duanxinum" placeholder="请填输入验证码"/>
</li>
</ul>
<button class="login-btn" type="button">登录</button>
<input type="hidden" id="recommender" name="recommender" value="${recommender}"/>
<p class="argee">登录即同意<a href="http://www.oohdear.com/protocol.html">《用户协议》</a></p>
</s:form>
</div>
<script type="text/javascript">
var oImg=document.querySelector('.btn');
oImg.addEventListener('click',function(){
oImg.src='<%=request.getContextPath()%>/UserAction!getPic.action?t='+Date.now();
},false);
</script>
</body>
</html