验证码是一些注册、登录等表单常用的一个功能,为了防止一些恶意性的填写表单,不断地提交表单,造成安全隐患。验证码一般随机可以切换验证码图片,经过远程验证成功后才能成功提交表单。实现了简单的验证码功能
<form>
<div class="joinCon"> <div class="row"> <div class="label"><em class="musTip">*</em>用户名:</div> <div class="cell"> <input type="text" data-checkurl="/supajaxcheck/checkusername" name="username" class="inTxt"> </div> </div> <div class="row"> <div class="label"><em class="musTip">*</em>密码:</div> <div class="cell"> <input type="password" name="password" class="inTxt"> </div> </div> <div class="row"> <div class="label"><em class="musTip">*</em>确认密码:</div> <div class="cell"> <input type="password" name="repassword" class="inTxt"/> </div> </div> <div class="row verBox "> <div class="label"><em class="musTip">*</em> 验证码:</div> <div class="cell verCode"> <input type="text" data-checkurl="/joinin/checkcode" class="inTxt w115 fl n-invalid" name="key" > <div class="checkCode"> <img src="/joinin/captcha/v/5449ad3ebee49" id="KeyImg" class="checkPic" style="cursor:pointer" title="点击换图" alt="点击换图"> <a href="javascript:return false;">换一张</a> </div> </div> </div> </div>
</form>
js代码片段:
var verCode = $('div.verCode','form'); verCode.each(function(){ var box = $(this), img = $('img.checkPic', box), src = img.attr('src'), chg = $('a', box), ipt = $('input.checkCode', box); chg.on('click', function(e) { e.preventDefault(); e.stopPropagation(); var _src = src+'&'+$.now(); img.attr('src', _src); }); img.on('click', function(e) { e.preventDefault(); e.stopPropagation(); var _src = src+'&'+$.now(); img.attr('src', _src); }); });
时间: 2024-09-27 04:36:07