【网页开发】登录注册页面01

效果图如下：

源代码如下：

<!doctype html>
<html>
<head><meta charset="utf-8"><title>房产登录注册系统</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>* {box-sizing:border-box;}body {font-family:'Montserrat',sans-serif;background:#f6f5f7;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;margin:-20px 0 50px;}h1 {font-weight:bold;margin:0;}p {font-size:14px;line-height:20px;letter-spacing:.5px;margin:20px 0 30px;}span {font-size:12px;}a {color:#333;font-size:14px;text-decoration:none;margin:15px 0;}.dowebok {background:#fff;border-radius:10px;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);position:relative;overflow:hidden;width:768px;max-width:100%;min-height:480px;}.form-container form {background:#fff;display:flex;flex-direction:column;padding:0 50px;height:100%;justify-content:center;align-items:center;text-align:center;}.social-container {margin:20px 0;}.social-container a {border:1px solid #ddd;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;margin:0 5px;height:40px;width:40px;}.social-container a:hover {background-color:#eee;}.form-container input {background:#eee;border:none;padding:12px 15px;margin:8px 0;width:100%;outline:none;}button {border-radius:20px;border:1px solid lightseagreen;background:lightseagreen;color:#fff;font-size:12px;font-weight:bold;padding:12px 45px;letter-spacing:1px;text-transform:uppercase;transition:transform 80ms ease-in;cursor:pointer;}button:active {transform:scale(.95);}button:focus {outline:none;}button.ghost {background:transparent;border-color:#fff;}.form-container {position:absolute;top:0;height:100%;transition:all .6s ease-in-out;}.sign-in-container {left:0;width:50%;z-index:2;}.sign-up-container {left:0;width:50%;z-index:1;opacity:0;}.overlay-container {position:absolute;top:0;left:50%;width:50%;height:100%;overflow:hidden;transition:transform .6s ease-in-out;z-index:100;}.overlay {background:lightseagreen;background:linear-gradient(to right,lightseagreen,lightseagreen) no-repeat 0 0 / cover;color:#fff;position:relative;left:-100%;height:100%;width:200%;transform:translateY(0);transition:transform .6s ease-in-out;}.overlay-panel {position:absolute;top:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 40px;height:100%;width:50%;text-align:center;transform:translateY(0);transition:transform .6s ease-in-out;}.overlay-right {right:0;transform:translateY(0);}.overlay-left {transform:translateY(-20%);}/* Move signin to right */.dowebok.right-panel-active .sign-in-container {transform:translateY(100%);}/* Move overlay to left */.dowebok.right-panel-active .overlay-container {transform:translateX(-100%);}/* Bring signup over signin */.dowebok.right-panel-active .sign-up-container {transform:translateX(100%);opacity:1;z-index:5;}/* Move overlay back to right */.dowebok.right-panel-active .overlay {transform:translateX(50%);}/* Bring back the text to center */.dowebok.right-panel-active .overlay-left {transform:translateY(0);}/* Same effect for right */.dowebok.right-panel-active .overlay-right {transform:translateY(20%);}</style>
</head><script type="text/javascript">//onblur失去焦点事件，用户离开输入框时执行 JavaScript 代码：//身份证号格式function validate_idcard(idcard) {var idcardReg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;if (idcard != "" && idcard.search(idcardReg) != -1) {document.getElementById("test_idcard").innerHTML = "<font color='green' size='3px'>√身份证号格式正确</font>";}else {document.getElementById("test_idcard").innerHTML = "<font color='red' size='3px'>身份证号不能为空</font>";}}//函数1：验证用户名格式function validate_username(username) {if (username != "") {document.getElementById("test_user").innerHTML = "<font color='green' size='3px'>√用户名正确</font>";} else {document.getElementById("test_user").innerHTML = "<font color='red' size='3px'>用户名错误</font>";}}//函数2：验证密码是否符合要求function validate_password(password) {//^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6-10}$var passwordReg = /^[a-zA-Z]\w{5,17}$/;if (password != "" && password.search(passwordReg) != -1) {document.getElementById("test_pw").innerHTML = "<font color='green' size='3px'>√密码格式正确</font>";} else {document.getElementById("test_pw").innerHTML = "<font color='red' size='3px'>亲，您输入的密码格式有误哦</font>";// alert("密码由数字和字母组成!");}}//函数3：验证两次输入的密码是否一样function validate_password2(password2) {var password = document.getElementById("password").value;//测试：console.log(password);//测试：console.log(password2);if (password == "") {document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>密码不为空</font>";} else if (password == password2) {document.getElementById("is_test_pw").innerHTML = "<font color='green' size='3px'>√两次输入的密码相同</font>";} else {document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>两次输入的密码不相同</font>";// console.log("密码由数字和字母组成!");}}
</script>
<body>
<div class="dowebok" id="dowebok"><div class="form-container sign-up-container"><form action="user/addUser"><h1>注册</h1><span>请输入您的信息</span><input type="text" id="idcard" name="idcard" placeholder="身份证号"onblur="validate_idcard(this.value)"><input type="text" id="Username" name="username" placeholder="姓名"onblur="validate_username(this.value)"><input type="password" id="Password" name="password" placeholder="以字母开头只能包含字母、数字和下划线"onblur="validate_password(this.value)"><input type="password" id="Password2" name="password2" onblur="validate_password2(this.value)" placeholder="确认密码"><button>注册</button></form></div><div class="form-container sign-in-container"><form action="house/mainHouse"><h1>登录</h1><span>或使用您的帐号</span><input type="text" placeholder="身份证号"><input type="text" placeholder="姓名"><input type="password" placeholder="密码"><a href="###">忘记密码？</a><button>登录</button></form></div><div class="overlay-container"><div class="overlay"><div class="overlay-panel overlay-left"><h1>已有帐号？</h1><p>请使用您的帐号进行登录</p><button class="ghost" id="signIn">登录</button></div><div class="overlay-panel overlay-right"><h1>没有帐号？</h1><p>立即注册加入我们，和我们一起开始旅程吧</p><button class="ghost" id="signUp">注册</button></div></div></div>
</div><script>var signUpButton = document.getElementById('signUp')var signInButton = document.getElementById('signIn')var container = document.getElementById('dowebok')signUpButton.addEventListener('click', function() {container.classList.add('right-panel-active')})signInButton.addEventListener('click', function() {container.classList.remove('right-panel-active')})
</script></body>
</html>

其他网页登录注册页面
自动轮播图片登陆注册页面
源码直接下载使用，带雪花的登陆注册页面、精美图片登陆注册页面

【网页开发】登录注册页面01相关推荐

【HTML+CSS+JS】登录注册页面大合集
前言学JS也学了一段时间,正巧碰上了人工智能要调用人脸识别接口进行真人人脸识别,于是便萌生了用人脸来进行注册和登录的想法,这样的话就需要开发一个登录注册页面,然后用JS绑定注册事件调用人脸识别接口进 ...
易课寄在线购课系统开发笔记（三十一）--登录注册页面实现
登录注册页面实现注册功能第一步:把静态页面添加到工程中. 第二步:展示页面. 请求的url: 登录:/page/login 注册:/page/register 参数:无返回结果:逻辑视图 Str ...
jsf登录注册页面_您将在下一个项目中使用JSF吗？
jsf登录注册页面上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...
HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结一.环境准备与开发工具二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
【JAVA】网页版登录注册系统2.0
前言 JAVA实现网页的登录与注册2.0版一.环境的搭建导入1.0版本的项目Java实现网页版登录注册系统-Java文档类资源-CSDN文库可参考[JAVA]网页版登录注册系统_Lx_Hy_的博客 ...
【JAVA】网页版登录注册系统
目录前言一.环境的搭建二.功能实现 1.登录功能 2.注册功能 [注意] 总结前言 JAVA实现网页的登录与注册一.环境的搭建 1.创建Maven Web工程,参考[JAVA]Web服务器- ...
Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（登录注册页面，验证码）
基于 Vue3.x + Vant UI 的多功能记账本(四) 文章目录基于 Vue3.x + Vant UI 的多功能记账本(四) 项目演示 1.登录注册页面 2.图片验证码 3.修改 axios ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码
今天给大家分享一款基于css3实现扁平简洁清爽的登录注册页面代码,使用浅色设计,兼容移动设备,加入了基本的表单验证,适合大部分网站. 代码很简单有css样式,index.html两部分代码.感兴趣的朋 ...

【网页开发】登录注册页面01

【网页开发】登录注册页面01相关推荐

最新文章

热门文章