<!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 （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
资源评论
博士僧小星
- 粉丝: 2439
- 资源: 5998
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
最新资源
- 5 薪酬结构统计分析表（依据基本信息自动生成）.xlsx
- 4 员工工资表-部门薪酬分析.xlsx
- 8 公司工程部人事薪酬分析.xlsx
- 13 公司人力资源薪酬工资统计表.xlsx
- 7 薪酬市场数据统计分析.xlsx
- 9 公司员工薪酬统计分析表.xlsx
- 10 财务分析员工薪酬统计表.xlsx
- 12 财务报表员工薪酬结算.xlsx
- 11 财务报表员工薪酬分析.xlsx
- 15 薪资情况分析表.xlsx
- 14 薪资筹划财务分析表.xlsx
- 18 财务汇报部门历年薪酬统计图表.xlsx
- 16 月度工资支出数据汇总图表.xlsx
- 17财务报告年度工资统计图表1.xlsx
- 20 工资表-部分统计-图表展示.xlsx
- 21 公司部门工资情况汇报图表模板.xlsx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
