<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>My blog 我的登录页面</title>
<link rel="stylesheet" href="../css/login_01.css" />
<style>
.re { width: 90px; height: 20px; float: left; }
#remeber span {}
.remeber { width: 20px; height: 20px; margin-top: 10px; /* text-align: center; */ }
span[name='msg'] { display: block; margin-top: 19px; float: left; }
</style>
<script src="../js/jquery-3.3.1.js"></script>
<script>
$(function() {
$("#button").click(function() {
$("span[name='msg']").text("");
var password = $.trim($("#password").val());
var username = $.trim($("#username").val());
var remeber = $("#remeber").val();
//判断name为4位以上的字符，pw为3位数字,采用正则表达式
var regname = /.{2,}/g;
var regpw = /\d{3}/g;
// test() 方法用于检测一个字符串是否匹配某个模式.
//如果字符串中有匹配的值返回 true ，否则返回 false。
if (!regname.test(username)) {
$("span[name='msg']").text("用户名必须为2个字符以上");
} else if (!regpw.test(password)) {
$("span[name='msg']").text("密码至少包含3位数字");
}
// AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。
else {
// console.log(username,password);
//提交数据,可以采用1.form提交,2.ajax提交
$.ajax({
type: "post", //规定请求的类型（GET 或 POST）。
url: "login_cl.php", //规定发送请求的 URL。默认是当前页面。
// ,"remeber":remeber 做记住密码的功能;
data: {
"username": username,
"password": password,
"remeber":remeber
}, //规定要发送到服务器的数据。
dataType: "text", //预期的服务器响应的数据类型。
// success 当请求成功时运行的函数。
success: function(data) { //data='ok'
console.log(data);
if ($.trim(data) == "ok") {
window.location.href = 'myhome.html';
} else {
$("span[name='msg']").text("用户名或密码有误");
}
}
});
}
});
})
</script>
</head>
<body>
<div class="login-container">
<h1>My blog</h1>
<div class="connect">
<p>登录我的博客</p>
</div>
<form id="loginForm">
<div>
<input type="text" name="username" id="username" class="username" placeholder="用户名" autocomplete="off" />
</div>
<div>
<input type="password" name="password" id="password" class="password" placeholder="密码" oncontextmenu="return false" onpaste="return false" />
</div>
<div class="re">
<input type="checkbox" name="remeber" class="remeber" value="yes" id="remeber"/>
<span> 记住账号</span>
</div>
<span style="text-align: center;color:red;" name="msg"></span>
<button id="button" type="button">登 陆</button>
</form>
<a href="register.php">
<button type="button" class="register-tis">还有没有账号？</button>
</a>
</div>
<script src="../js/jquery-1.7.2.min.js"></script>
<script src="../js/common.js"></script>
<!-- 背景图片自动更换 -->
<script src="../js/supersized.3.2.7.min.js"></script>
<script src="../js/supersized-init.js"></script>
<!--表单验证-->
<script src="../js/jquery.validate.min.js?var1.14.0"></script>
</body>
</html>
基于HTML5+CSS3的个人博客网站设计与实现.zip
版权申诉
56 浏览量
2024-02-12
22:42:25
上传
评论
收藏 16.03MB ZIP 举报
基于HTML5+CSS3的个人博客网站设计与实现.zip （324个子文件） 
1 1B 1 1B 1 1B 1 1B 1 1B 1 1B 1 1B bootstrap.min.css 150KB bootstrap.css 143KB bootstrap.css 143KB login.css 39KB fontAwesome.css 39KB welcome.css 33KB mouse_03.css 20KB blog-slider.css 18KB blog-main.css 13KB login_01.css 6KB user.css 4KB blog-carousel.css 4KB fullpage.css 3KB lightbox.css 3KB mouse_02.css 3KB dmaku.css 2KB 404.css 2KB topanv.v1.0.css 1KB style.css 1KB base.css 1KB banner.css 1KB index.css 1KB mouse_01.css 936B iconfont.css 924B blog-Public.css 730B d 1B fontawesome-webfont.eot 162KB fontawesome-webfont.eot 162KB glyphicons-halflings-regular.eot 20KB glyphicons-halflings-regular.eot 20KB flexslider-icon.eot 2KB
loading.gif 8KB loading.gif 8KB load.gif 2KB up.gif 2KB loadpic.gif 568B body_bg.gif 70B
source.html 49KB details21.html 30KB details22.html 28KB details23.html 26KB details02.html 25KB details24.html 25KB details28.html 23KB details05.html 23KB details07.html 23KB details03.html 23KB details06.html 23KB details27.html 23KB details04.html 23KB details08.html 23KB details25.html 22KB details01.html 22KB details26.html 22KB details29.html 21KB myhome.html 21KB index.html 21KB hot.html 20KB album.html 20KB page02.html 20KB fullpage.html 20KB page04.html 18KB page05.html 18KB page03.html 18KB waterfall.html 16KB y_speak.html 11KB y_answer.html 5KB y_user.html 2KB y_info.html 2KB 404.html 2KB hm.ico 14KB
bg03.jpg 1.03MB 1st-section.jpg 359KB bg02.jpg 326KB 5th-section.jpg 318KB 3-tab.jpg 252KB 4-tab.jpg 248KB 2-tab.jpg 231KB details08_1.jpg 228KB 电信5G.jpg 219KB 1-tab.jpg 211KB details08_3.jpg 211KB 2nd-section.jpg 204KB details08_2.jpg 198KB zfbplay.jpg 195KB details26_1.jpg 175KB home02.jpg 173KB 无损付费音乐02-741x362.jpg 150KB details05_1.jpg 149KB 无损付费音乐01-741x362.jpg 136KB details06_2.jpg 131KB details05_2.jpg 121KB slide_01_640x340.jpg 112KB共 324 条
- 1
- 2
- 3
- 4
资源评论
博士僧小星
- 粉丝: 1931
- 资源: 5896
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
