注册或登录时用到的图片验证码

.contronller

@RequestMapping("/getCode")
public void getCode(HttpServletRequest request, HttpServletResponse response)throws IOException {
    OutputStream os = null;
    response.setContentType("image/jpg");
    response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-control", "no-cache");
    response.setDateHeader("Expires", 0);
    BufferedImage img = new BufferedImage(68, 22,BufferedImage.TYPE_INT_RGB);
    Graphics g = img.getGraphics();
    Random r = new Random();
    Color c = new Color(200, 150, 255);
    g.setColor(c);
    g.fillRect(0, 0, 68, 22);
    StringBuffer sb = new StringBuffer();
    char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".toCharArray();
    int index = 0;
    int len = ch.length;

    for (int i = 0; i < 4; i++) {
        index = r.nextInt(len);
        g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255)));
        g.setFont(new Font("Arial", Font.BOLD | Font.ITALIC, 22));
        g.drawString("" + ch[index], (i * 15) + 3, 18);
        sb.append(ch[index]);

    }
    try {
        request.getSession().setAttribute(CommonConstants.VERIFY_CODE, sb.toString());
        g.dispose();
        os = response.getOutputStream();
        ImageIO.write(img, "JPG", os);
        os.flush();
    } catch (Exception e) {
        //log.error(e.toString());
    }finally{
        try {
            if(null!=os){
                os.close();
            }
        } catch (Exception e2) {
            //log.error(e2.toString());
        }
    }
}

/**
 * 验证码验证是否正确
 */
@RequestMapping(value = "/verifyCode", method = {RequestMethod.GET, RequestMethod.POST})
@ResponseBody
public ResultJsonInfo verifyCode(HttpServletRequest request) {
    //获取随机验证码
    String phone = request.getParameter("phone");
    request.getSession().setAttribute("phone", phone);
    String verifyCode = request.getParameter("code");
    SessionBean sessionBean = ContextHelper.getSessionBean();
    String sessionVerifyCode = request.getSession().getAttribute(CommonConstants.VERIFY_CODE).toString();
    /*  String smsCode = cacheService.get(CashoutConst.WEIXIN_SMS_CODE + ":" + phone);*/
    if (StringUtils.isBlank(verifyCode)) {
        return new ResultJsonInfo(false, "验证码不能为空");
    }
    if (StringUtils.isBlank(sessionVerifyCode)) {
        return new ResultJsonInfo(false, "验证码已过期");
    }
    if (!verifyCode.equals(sessionVerifyCode)) {
        return new ResultJsonInfo(false, "验证码错误");
    }
    else {
        return new ResultJsonInfo(true, "验证成功");
    }
}

.html

<#include "/common/cashout-layout.html">
<@layout title="注册"  body=""
scripts=["/assets/cashout/js/basic.js"]
styles=["/assets/cashout/css/public.css"]>
  <!--  <div class="loginBox">
        <form id="login-form">
        <div class="loginBox_t">

            <ul>
                <li class="tel_li">
                    <input type="tel" name="phone" placeholder="请输入手机号" oninput="telTxt()" maxLength="11">
                </li>
                <li class="login_text">
                    <input type="text" name="code" style="float: left;" placeholder="请输入验证码">
                    <img src="getCode.html" alt="" title="点击刷新" class="veryfy_img"  style="float: right; 85px;"  id="getVerifyCode">

                </li>

            </ul>
        </div>
        <div class="loginBox_b text_center">
            &lt;!&ndash;<input type="submit" value="下一步" />&ndash;&gt;
            <button   type="button" onclick="register()">下一步</button>
        </div>
        </form>
    </div>-->


<div class="loginBox">
    <form id="login-form">
        <div class="loginBox_t">

            <ul>
                <li class="tel_li">
                    <input type="tel" name="phone" placeholder="请输入手机号" oninput="telTxt()" maxlength="11">
                </li>
                <li class="securitycode_li clearfix">
                    <input type="text" class="code" name="code" placeholder="请输入验证码" style=" float:left;">
                    <img src="getCode.html" alt="" title="点击刷新"
                         class="veryfy_img" width="77" height="30" id="getVerifyCode" style="  85px; float:  right;">
                </li>
            </ul>
        </div>
        <div class="loginBox_b text_center">
            <button type="button" onclick="register()">下一步</button>
        </div>
        <div class="tip_t">温馨提示：验证码区分大小写</div>
    </form>
</div>
<script type="text/javascript">
    function telTxt(e){
        var theEvent = window.event || arguments.callee.caller.arguments[0];
        var thisTxt = theEvent.target.value;
        var tel = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        if (tel.test(thisTxt)) {
            $(".securitycode").attr("disabled",false);
        }else{
            $(".securitycode").attr("disabled",true);

        };
    }
    function register(){
            if ($(".tel_li input").val() == "") {
                alert("请输入手机号")
            }else if($(".code").val() == ""){
                alert("请输入验证码")
            }else{

                   var phone = $(".tel_li input").val();
                   var code = $(".code").val();
                $.ajax({
                    url:'verifyCode.html',
                    type:'post',
                    data:'phone='+phone+'&code='+code,
                    async : false, //默认为true 异步
                    error:function(){
                        alert("查询异常");
                      window.location.href="register.html";
                    },
                    success:function(data) {
                        var flag = JSON.stringify(data.success);
                        if(flag == 'true'){
                            window.location.href="setPass.html";
                        }
                        else {
                            $.toptip(JSON.stringify(data.content), 3000, 'error');
                    }
                }
            });
    }
    }
    (function($) {
        $('#getVerifyCode').on('click', function (e) {
            var timenow = new Date().getTime();
            this.src = "getCode.html?d=" + timenow;
        });
    })(jQuery)

</script>
</@layout>