验证码的实现 与jQuery 的表单阻止

1.验证码的实现 jQuery 加 js 实现


var cns = ['q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n',
				'm','M','N','B','V','C','X','Z','A','S','D','F','G','H','J','K','L','P','O','I','U','Y','T','R','E','W','Q',
				'0','1','2','3','4','5','6','7','8','9'];
 
function setAutoCode() {
	var str="";
	for(var i=0;i<4;i++){
		var index=Math.floor(Math.random()*cns.length);	
		str+=cns[index];
		
		
	}
	$("#yz").html(str); 这里也可以使用js获取标签设置
	
}

2.jQuery表单验证与jQuery 的表单阻止e.preventDefault(); //jQery防止表单提交

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<h
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个使用jQuery实现动态验证码的示例: HTML代码: ``` <form> <label for="email">电子邮件:</label> <input type="text" id="email" name="email"><br> <label for="captcha">验证码:</label> <input type="text" id="captcha" name="captcha"> <img src="#" alt="验证码" id="captchaImg"> <a href="#" id="refreshCaptcha">换一张</a><br> <input type="submit" value="提交"> </form> ``` JavaScript代码: ``` $(document).ready(function() { var captchaUrl = 'captcha.php'; //验证码图片的URL地址 var captchaId = ''; //验证码ID //刷新验证码图片 function refreshCaptcha() { captchaId = ''; //清空验证码ID $('#captchaImg').attr('src', captchaUrl + '?t=' + new Date().getTime()); //重新加载图片 } //点击“换一张”链接时,刷新验证码 $('#refreshCaptcha').click(function() { refreshCaptcha(); return false; //阻止默认链接行为 }); //在页面加载时,刷新验证码 refreshCaptcha(); //提交时,验证验证码是否正确 $('form').submit(function() { var captchaInput = $('#captcha'); //验证码输入框 var captchaValue = captchaInput.val(); //输入的验证码 if (captchaValue === '') { alert('请输入验证码'); captchaInput.focus(); return false; } $.ajax({ url: 'checkCaptcha.php', //验证验证码的URL地址 type: 'POST', data: { id: captchaId, value: captchaValue }, success: function(result) { if (result === 'true') { //验证码正确,提交 return true; } else { //验证码错误,刷新验证码 alert('验证码错误'); refreshCaptcha(); captchaInput.val(''); captchaInput.focus(); return false; } }, error: function(jqXHR, textStatus, errorThrown) { alert('出现错误:' + textStatus); refreshCaptcha(); captchaInput.val(''); captchaInput.focus(); return false; } }); return false; }); }); ``` 在上面的代码中,我们首先定义了一个变量`captchaUrl`,验证码图片的URL地址。然后定义了一个`refreshCaptcha`函数,用于刷新验证码图片。在函数内部,我们首先清空了验证码ID,然后使用jQuery更新了验证码图片的`src`属性,加上了一个随机参数`t`,以便每次刷新图片都会产生新的URL地址,从而避免浏览器缓存。接着,在页面加载时,我们调用了`refreshCaptcha`函数,以显示初始的验证码图片。 接下来,我们使用jQuery绑定了“换一张”链接的`click`事件,当用户点击该链接时,会调用`refreshCaptcha`函数,刷新验证码。 最后,我们使用jQuery绑定了的`submit`事件,在提交之前,首先验证用户输入的验证码是否正确。如果输入的验证码为空,会弹出提示框,要求用户输入验证码。如果输入的验证码不为空,则使用jQuery的`ajax`方法向服务器端发送验证请求,包括验证码ID和输入的验证码值。服务器端会根据这些参数,验证验证码是否正确,并返回一个布尔值。如果验证码正确,则返回`true`,提交;否则,返回`false`,并弹出提示框,要求用户重新输入验证码。在验证失败时,我们还调用了`refreshCaptcha`函数,刷新验证码图片,以便用户重新输入验证码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值