验证码是一些注册、登录等表单常用的一个功能,为了防止一些恶意性的填写表单,不断地提交表单,造成安全隐患。验证码一般随机可以切换验证码图片,经过远程验证成功后才能成功提交表单。实现了简单的验证码功能

<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);
});
});