SSM框架JSP登陆页面验证码实现

最新推荐文章于 2024-08-17 16:39:22 发布

周星星是我

最新推荐文章于 2024-08-17 16:39:22 发布

阅读量4.1k

点赞数 2

分类专栏：随笔文章标签： SSM 用户登录验证码 java Script

本文链接：https://blog.csdn.net/qq_36831718/article/details/80095770

版权

本文介绍了如何在SSM框架中结合Java和JavaScript实现用户登录页面的验证码功能。通过整合验证码验证与用户登录过程，实现了在用户输入正确验证码后执行登录操作。验证码的验证成功会触发用户登录的函数，省去了独立的登录按钮，提高了用户体验。

摘要由CSDN通过智能技术生成

一、前台：

1.这里是jsp页面的标签：

<script src="../styles/js/jquery-3.2.1.min.js" type="text/javascript"></script>
<link href="../styles/css/doctorlogin.css" rel="stylesheet" />
<link rel='stylesheet' href='../styles/bootstrap/css/bootstrap.min.css'>

2.下面是script，直接拿过来用就行，注意往后台跳转的地址要改成自己的，用我的也可以.

function reload(){
		document.getElementById("image").src="<%=request.getContextPath() %>/picCheck/imageServlet?date="+new Date().getTime();
		$("#checkcode").val("");   // 将验证码清空
	} 
	 
	 function verificationcode(){
		 var text=$.trim($("#checkcode").val());
        
		 var sp=$('#span').val();
		 
		 $.post("${pageContext.request.contextPath}/Verification/verificationServlet",{op:text},function(data){
			 data=parseInt($.trim(data));
			 if(data>0){
				 $("#span").text("验证成功!").css("color","green");
			 }else{
				 /* $("#span").text("验证失败!").css("color","red"); */
				alert(text);
				 if(text==""){
					 $("#span").text("验证为空，请君重新输入!").css("color","red");
				 }else{
					 $("#span").text("验证码错误").css("color","red");
				 }
				 
					
					 	 
				 reload();  //验证失败后需要更换验证码
			 }
		 });
		 $("#checkcode").