- 验证码隐藏域:
- <div id="validCodeDiv" style="display:none">
- <div class="grey_box style5">
- <form id="validCodeForm" class="info_box" method="post">
- <div class="box">
- <div style="display:none">
- <input type="text" />
- </div>
- <div>验证码:<input type="text" id="validateCodeByDiv" name="validateCode" tabindex="3" class="text one" /></div>
- <div id="msgCodeVoclide" class="codeVolide"></div>
- <div class="clear">
- <img title="点击更换" id="valdiateImg" onclick="javascript:refreshTop(this);" src1="makeValidateCode.do" class="validateImg" />
- <a href="javascript:;" onclick="fluseCode();">看不清?点击刷新</a>
- </div>
- </div>
- <div class="btns">
- <input type="button" class="btn_full_yellow" value="提 交" id="userSubmit" />
- <input type="button" class="btn_full_gray" value="取 消" id="userCancel" />
- </div>
- </form>
- </div>
- </div>
- 使用的弹出层插件是layer
- 登录三次错误之后再次登录的时候,验证码错误,现在要弹出框中弹出验证码。
- //取消按钮
- $("#userCancel").click(function() {
- //$.closePlus(sysDialog);
- layer.close(sysDialog);
- });
- //弹出层中的提交按钮
- $("#userSubmit").click(function() {
- //
- var newValidCode = $("#validateCodeByDiv").val();
- if (!/^[\\w\\d]{4}$/.test(newValidCode)) {
- //$("#msgCodeVoclide").text("*请输入4位验证码");
- layer.alert("请输入4位验证码", 2, "提示!");
- //fluseCode();
- return false;
- }
- //赋值
- $("#validateCodeTop").val(newValidCode);
- $("#validateCodeByDiv").val("");
- //$.closePlus(sysDialog);
- layer.close(sysDialog);
- //提交
- $("#loginBtn").click();
- });
- /**
- *登录三次之后再次登录的时候需要验证码验证,js编写
- */
- var sysDialog;
- $("#loginForm").ajaxSubmit({
- url : basePath + "login.do?mathRandom=" + Math.random(),
- type : "post",
- cache : false,
- async : false,
- success : function(data) {
- if (data.isLogin == "0") {
- /******验证码输入*******/
- if (data.needValidateCode == 1) {//用户输入三次以上
- //在这里引入验证码和弹出层
- sysDialog = $.layer({
- type : 1,
- title : '提示',
- fix : false,
- offset : ['200px', '50%'],
- area : ['auto', 'auto'],
- shadeClose : false,
- page : {
- dom : '#validCodeDiv'
- }
- });
- // $("#valdiateImg").click();
- //刷新验证码
- fluseCode();
- return;
- } else {
- layer.alert(data.msg, 2, "提示!", function() {
- $("#validateCodeTop").val("");
- location.href = "login.jsp";
- return;
- });
- }
- 弹出框快捷键
- $("#validCodeDiv") .find("input").keyup(function(event) {
- if (event.keyCode == '13')
- $("#userSubmit").click();
- });
- //刷新验证码
- function fluseCode() {
- $("#valdiateImg").click();
- $("#validateCodeByDiv").focus();
- }
- //该片段来自于http://www.codesnippet.cn/detail/301220138334.html
来源: http://www.codesnippet.cn/detail/301220138334.html