基于jsp的登录界面(js+css+ajax）

最新推荐文章于 2023-11-08 15:15:53 发布

冷眸ジ印温柔

最新推荐文章于 2023-11-08 15:15:53 发布

阅读量724

点赞数

分类专栏： jsp 文章标签： java

本文链接：https://blog.csdn.net/qq_42998270/article/details/106452838

版权

jsp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基于jsp的注册界面当用户输入用户名时系统会自动的向数据库查询该用户名是否存在，如果存在，则该用户名不能注册，否则则能注册，当用户输入密码时系统会自动判断用户输入的密码是否遵守系统的密码规则，如果不符合在提示用户重新输入，最后会让用户输入手机号，获取手机号验证码，输入正确则能注册，输入错误则会提醒用户重新输入

jsp:

<%@ 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册界面</title>
</head>
<script type="text/javascript"
   src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script>
<script type="text/javascript">
   function io1() {
       $("#username").blur(function() {
           $.ajax({
               url : "${pageContext.request.contextPath}/servletJqAjax",
               date : {
                   "username" : $("username").val()
               },
               type : "POST",
               dataType : "text",
               success : function(data) {
                   $("#nameInfo").html(data);
               }
           })
       });
   }
   function io2() {
       $("#pass").blur(function() {
           $.ajax({
               url : "${pageContext.request.contextPath}/servletJqAjax",
               date : {
                   "password" : $("pass").val()
               },
               type : "POST",
               dataType : "text",
               success : function(data) {
                   $("#pwdInfo").html(data);
               }
           })
       });
   }
   function io3() {
       $("#pass_1").blur(function() {
           $.ajax({
               url : "${pageContext.request.contextPath}/servletJqAjax",
               date : {
                   "pass_1" : $("pass_1").val()
               },
               type : "POST",
               dataType : "text",
               success : function(data) {
                   $("#pwdInfo_1").html(data);
               }
           })
       });
   }
</script>
<script type="text/javascript">
   var codeTime = 1000;
   function getCode(obj) {

       sendSms(obj);
   }
   //开启验证码倒计时，并且在时间内不能重复点击
   function startTime(obj) {
       var ins = setInterval(function() {
           if (codeTime == 0) {
               $(obj).attr("disabled", false);
               $(obj).val("获取验证码");
               codeTime = 10;
               clearInterval(ins);
           } else {
               $(obj).attr("disabled", true);
               $(obj).val("重新发送(" + codeTime + ")秒");
               codeTime--;
           }
       }, 1000);
   }

   ///发送ajax请求获取验证码
   function sendSms(obj) {
       $.ajax({
           url : "${pageContext.request.contextPath}/CodeController",
           type : "POST",
           data : {
               "phone" : $("#phone").val()
           },
           success : function(res) {
               if (res.code == 200) {
                   alert("获取验证码成功");
                   startTime(obj);
               } else {
                   alert("获取失败:" + res.msg);
               }
           }
       })
   }
</script>
<style type="text/css">
body {
   font-family: 楷体;
   font-size: 20px;
   background-image: url("../images/1.png");
   background-size: cover;
}

h1 {
   float: left;
   padding-left: 10%;
   color: #fff;
   font-size: 50px;
}

table {
   position: absolute;
   left: 55%;
   padding: 4% 4% 6% 3%;
   margin-right: 10%;
   margin-top: 0%;
   color: #fff;
   border-collapse: separate;
   border-spacing: 10px 20px;
}

.text {
position: relative;
}

.form-control {
   width: 200px;
   padding: 7px 0px;
   color: #fff;
   border: none;
   border-bottom: 1px solid #fff;
   outline: none;
   background: transparent;
}

.form-control:focus {
border-color: rgba(59, 137, 245, 0.5);
outline: 0;
}

.box {
   background: rgba(0, 0, 1, .7);
   box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
   border-radius: 10px;
}

.submit {
   width: 80%;
   height: 50px;
   background-color: #3B89F5;
   border: none;
   font-size: 18px;
   color: #fff;
   border-radius: 8px;
   -webkit-transition-duration: 0.4s;
   transition-duration: 0.4s;
}

.submit:HOVER {
   background-color: #0C6CED;
   color: #fff;
   cursor: pointer;
}

.Hyperlink {
text-decoration: none;
}

/* .Hyperlink:HOVER {
   position: absolute;
   left: 15px;
   top: 5px;
   padding: 5px;
   background-color: #0095ff;
   border-radius: 5px;
   color: #fff;
   content: attr(title);
   z-index: 2;
   width: 120px;
} */
.a::HOVER {
   position: absolute;
   left: 15px;
   top: 20px;
   padding: 50px;
   background-color: #0095ff;
   border-radius: 5px;
   color: #fff;
   content: attr(title);
   z-index: 2;
   width: 120px;
}

.b::HOVER {
   position: absolute;
   left: 15px;
   top: 5px;
   padding: 5px;
   background-color: #0095ff;
   border-radius: 5px;
   color: #fff;
   content: attr(title);
   z-index: 2;
   width: 120px;
}

textarea {
   resize: none;
}
</style>
<body>
   <div>
       <form action="../User_RegisterServlet" method="post"
           name="frm_register">
           <table style="background-color: Light purple">
               <tr>
                   <th colspan="4" style="font-size: 30px;">用户注册</th>
               </tr>
               <tr>
                   <td class="text" align="center">用户名:</td>
                   <td colspan="3"><input class="form-control form-input a"
                       type="text" name="username" id="username" ><span
                       id="nameInfo"></span></td>
               </tr>
               <tr>
                   <td class="text" align="center">密码:</td>
                   <td><input class="form-control form-input a" type="password"
                       name="pass" id="pass" οnblur="io2()"><span id="pwdInfo"></span></td>
                   <br>
               </tr>
               <tr>
                   <td class="text" align="center">确认密码:</td>
                   <td><input class="form-control form-input a" type="password"
                       name="pass_1" id="pass_1" οnblur="io3()"><span
                       id="pwdInfo_1"></span></td>
               </tr>
               <tr>
                   <td class="text" align="center">性别:</td>
                   <td><input type="radio" name="sex" value="0">
                       男   <input type="radio" name="sex" value="1">
                       女  </td>
               </tr>
               <tr>
                   <td class="text" align="center">职业:</td>
                   <td><select name="profession">
                           <option value="学生">学生</option>
                           <option value="教师">教师</option>
                   </select></td>
               </tr>
               <tr>
                   <td class="text" align="center">个人爱好:</td>
                   <td colspan="3"><input type="checkbox" name="favourite"
                       value="电脑网络">电脑网络   <input type="checkbox"
                       name="favourite" value="影视娱乐">影视娱乐   <input
                       type="checkbox" name="favourite" value="棋牌娱乐">棋牌娱乐  
                   </td>
               </tr>
               <tr>
                   <td class="text" align="center">个人说明</td>
                   <td colspan="3"><textarea name="note" rows="5" cols="40"></textarea></td>
               </tr>
               <tr>
                   <td class="text" align="center">手机号:</td>
                   <td><input class="form-control form-input a" id="phone"
                       name="phone" type="number"> <input
                       οnclick="getCode(this);" type="button" value="获取验证码"></td>
               </tr>
               <tr>
                   <td class="text" align="center">验证码:</td>
                   <td><input class="form-control form-input a" name="code"
                       type="number" /><br /></td>
               </tr>
               <tr>
                   <td colspan="4" style="background-color: transparent;"
                       align="center"><input class="sr" type="submit" value="注册">
                       <input class="sr" type="reset"></td>
               </tr>
           </table>
       </form>
   </div>
</body>
</html>

冷眸ジ印温柔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于jsp的登录界面(js+css+ajax）

基于jsp的注册界面当用户输入用户名时系统会自动的向数据库查询该用户名是否存在，如果存在，则该用户名不能注册，否则则能注册，当用户输入密码时系统会自动判断用户输入的密码是否遵守系统的密码规则，如果不符合在提示用户重新输入，最后会让用户输入手机号，获取手机号验证码，输入正确则能注册，输入错误则会提醒用户重新输入jsp:<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%...
复制链接

扫一扫