web通讯录之登录注册界面
生活随笔
收集整理的這篇文章主要介紹了
web通讯录之登录注册界面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
登錄頁面：
功能說明：登錄頁面是在頁面模糊背景網站中找的素材加以修改成自己想要的登錄界面，我們老師讓我們在登錄時候加驗證碼，看了大部分人用的是簽名登錄方式，覺得沒有什么特色因此設計了滑動登錄，把驗證和登錄結合在一起。
滑動模板登錄代碼：
?特別說明，因為采用的是滑動登錄因此在用戶輸入完賬戶密碼后不能通過Enter鍵登錄，因此要把按鈕類型為submit加上一個監聽事件把回車鍵屏蔽掉，當調用drag.js代碼滑動置頂后在js代碼中啟用submit進行登錄。
drag.js代碼(滑動登錄js代碼):
禁用回車鍵代碼：
<form id="ff" action="LoginServlet" method="post" οnkeydοwn="if(event.keyCode==13){return false;}">onkeydown事件是在用戶按下 鍵盤時候觸發，event.keyCode中的值可以參考 event.keyCode用法詳解博客文章登錄頁面Html代碼：
<!DOCTYPE html> <html lang="en" class="no-js"><head><meta charset="utf-8"><title>登錄頁面</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><link rel="stylesheet" href="bootstrap.min.css"><link rel="stylesheet" href="assets/css/reset.css"><link rel="stylesheet" href="assets/css/supersized.css"><link rel="stylesheet" href="assets/css/style.css"><link rel="stylesheet" type="text/css" href="test/css/htmleaf-demo.css"><link href="test/css/drag.css" rel="stylesheet" type="text/css"/><script src="assets/js/jquery-1.8.2.min.js"></script><script src="assets/js/supersized.3.2.7.min.js"></script><script src="assets/js/supersized-init.js"></script><script src="assets/js/scripts.js"></script> <style> body {background:url(../img/jian.jpg) no-repeat; font-family: 'PT Sans', Helvetica, Arial, sans-serif;text-align: center;color: #fff; } </style></head><body><script type="text/javascript">$(document).ready(function(){var $div=$("#sub");$div.hide(); /* var $div1=$("#drag");$div1.hide();$("#p").click(function(){$div1.show(500);}) */})</script><div class="page-container"><div class="container"><div class="container"><h1 style="color:black;">DIY通訊錄</h1><form id="ff" action="LoginServlet" method="post" οnkeydοwn="if(event.keyCode==13){return false;}"><input type="text" name="username" class="username" placeholder="Username"><input type="password" id="p" name="password" class="password" οnclick="f()" placeholder="Password"><div id="drag"></div> <button type="submit" style="background-color:#FFEBCD;" id="sub">登錄</button><button style="background-color:#FFEBCD;font-color:black;"οnclick="javascript:window.location.href='zhuce.jsp'">注冊</button> </div></div></form></div> <script src="http://www.jqhtml.com/jquery/jquery-1.10.2.js"></script><script>window.jQuery || document.write('<script src="test/js/jquery-1.11.0.min.js"><\/script>')</script><script src="test/js/drag.js" type="text/javascript"></script><script type="text/javascript">$('#drag').drag();</script></body> </html>注冊界面：
?界面設計用的是BootStrap，其中用到的技術有JQuery、AJAX等，注冊時候通過AJAX對新用戶輸入的賬戶
進行動態驗證，其中城市選擇器是在網上找的插件，下載地址點擊打開鏈接。
注冊頁面代碼：
<%@ 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> <link rel="stylesheet" href="bootstrap/bootstrap.min.css"> <style type="text/css">.demo{width:220px;margin:50px auto;}.demo input{padding: 12px 18px;} </style> <!-- ajax異步通信動態驗證賬戶 --> <script type="text/javascript">var xmlHttp;function createXMLHttp(){xmlHttp=new XMLHttpRequest(); }function f(id){createXMLHttp();xmlHttp.open("POST","FindUsername?id="+id);xmlHttp.onreadystatechange=showMsgCallback;xmlHttp.send(null); }function showMsgCallback(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){var text=xmlHttp.responseText;if(text=="yes")document.getElementById("mark").innerHTML="該賬戶可以注冊";elsedocument.getElementById("mark").innerHTML="該賬戶已被注冊";}}} </script> </head> <body> <div class="contianer"><div class="row"><div class="col-xs-6 col-xs-offset-3"> <form action="RegisterServlet"method="post"><div class="form-group"><br><label for="sex">性別</label><br><input type="radio" id="sex" name="man" value="男"/>男<input type="radio" id="sex" name="man" value="女"/>女</div><div class="form-group"><label for="username">賬戶</label><input type="text" class="form-control" name="username" οnblur="f(this.value)" id="username" placeholder="Username"><span style="color:red;font-family:Times New Roman;" id="mark"></span></div><div class="form-group"><label for="password">密碼</label><input type="password" class="form-control" name="password" id="password" placeholder="Password"></div><div class="form-group"><label for="name">姓名</label><input type="text" class="form-control" name="name"id="name" placeholder="Name"></div><div class="form-group"><label for="email1">電子郵箱</label><input type="email" class="form-control" name="email"id="email" placeholder="Email"></div><div class="form-group"><label for="tel">電話號碼</label><input type="tel" class="form-control" name="tel"id="tel" placeholder="Tel"></div><div class="form-group"><label for="company">公司</label><input type="text" class="form-control" name="company"id="company" placeholder="Company"></div><button type="submit" class="btn btn-primary">Submit</button></div></div> </form> </div> </body> </html>
還有很多css和js代碼沒有粘貼出來太多了，希望給你們作為一個參考吧！
總結
以上是生活随笔為你收集整理的web通讯录之登录注册界面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html上传文件
- 下一篇： socket网络编程多线程