关于那些表单的验证码

46 篇文章 0 订阅


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

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端岚枫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值