在这些形式的验证码

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 65 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个包含用户名、密码及验证码验证的表单示例。通过JavaScript实现了验证码的自动切换功能，当用户点击验证码图片或‘换一张’链接时，会加载新的验证码图像。

代码是一些招生、登录并因此形成一个经常使用，为了防止填写表格的恶意性质，继续提交表单。安全风险。代码通常可以随意切换验证码。经过远程验证成功的人才成功提交表单。实现代码的简单函数

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