企业网站前端制作实战教程 JQuery CSS JS HTML 登录表单验证

引入重置css样式reset样式

@charset "utf-8";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;/*background: transparent;*/
}table {border-collapse: collapse;border-spacing: 0;
}fieldset,
img {border: 0;
}address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {font-style: normal;font-weight: normal;
}ol,
ul {list-style: none;
}caption,
th {text-align: left;
}h1,
h2,
h3,
h4,
h5,
h6 {font-size: 200%;font-weight: normal;
}:focus {outline: 0;
}a {text-decoration: none;
}a:hover img {border: none;
}a:active {noOutline: expression(this.onFocus=this.blur());
}/*清除浮动*/.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;
}.clearfix {display: inline-block;
}/* Hides from IE-mac \*/* html .clearfix {height: 1%;
}.clearfix {display: block;
}/* End hide from IE-mac */

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/style.css">
</head><body><!-- 登录框 --><div class="login"><!-- 登录框具体部分 --><div class="loginmain"><h4>登录管理系统</h4><form action="/" method="get"><ul><li><span>管理员账号:</span><input type="text" name="username" value=""></li><li><span>管理员密码:</span><input type="password" name="password" value=""></li><li><span>登录验证码:</span><input type="text" name="verify" value=""></li><li><div class="verifyimg"><img src="./image/verifyimg.jpg" width="100%" height="100%" alt=""></div></li><li><input type="button" value="登录" name="loginbtn"><span id="text"></span></li></ul></form></div></div>
</body>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/script.js"></script></html>

引入style.css

/* 登录样式开始 */.login {width: 500px;height: 340px;background-color: #0077ca;position: absolute;top: 50%;left: 50%;margin: -170px 0 0 -250px;
}.loginmain {padding: 20px;color: #fff;
}.loginmain ul li {margin-top: 15px;
}.loginmain ul li span {display: inline-block;width: 125px;height: 10px;text-align: right;font-size: 14px;
}.loginmain ul li input[type="text"],
.loginmain ul li input[type="password"] {width: 250px;height: 30px;padding: 0 5px;
}.loginmain ul li .verifyimg {width: 262px;height: 48px;margin-left: 130px;background: #1696d7;
}.loginmain ul li input[type="button"] {width: 80px;height: 34px;border: none;background: #00497d;color: #fff;font-size: 14px;margin-left: 130px;cursor: pointer;
}/* 鼠标移入颜色变化 */.loginmain ul li input[type="button"]:hover {background: #015997;
}/* 登录界面实现 */

引入jquery和引入script.js

//页面先加载
$(function() {/*  console.log(1); *///表单验证/* console.log($('input[type="loginbtn"]')); */$('input[name="loginbtn"]').click(function(event) {var $name = $('input[name="username"]');/* console.log($name); */var $password = $('input[name="password"]');var $verify = $('input[name="verity"]');var $text = $('#text');//去掉字符串多余空格var _name = $.trim($name.val());var _password = $.trim($password.val());var _verify = $.trim($verify.val());//if ('' == _name) {$text.text('请输入用户名');$name.focus();return;}if ('' == _password) {$text.text('请输入密码');$password.focus();return;}if ('' == _verify) {$text.text('请输入验证码');$verify.focus();return;}$text.text("登录成功,请稍后...")});
});

运行结果

企业网站前端制作实战教程 JQuery CSS JS HTML 登录表单验证相关推荐

企业网站前端制作实战教程 JQuery CSS JS HTML 登录界面
盒子模型引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, ...
企业网站前端制作实战教程 JQuery CSS JS HTML 项目需求分析与准备工作
1思维导图 2登录界面 3管理界面
CSS特效（1）——css伪类实现表单验证样式
css伪类实现表单验证样式 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
CSS骚操作之表单验证功能的实现代码
CSS骚操作之表单验证功能的实现代码效果图如下: 原理: 表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号.邮箱.身份证-):valid伪类,可以匹配通过pattern验证的元 ...
使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)
直接跳到末尾获取完整源码在本文中,我将带着大家展示如何使用 HTML 和 CSS 代码创建玻璃态登录表单.你可以将任何简单的设计转换为玻璃态设计.为此,只需要更改一点代码.首先使用 backgr ...
2021/11/1 前端开发之JavaScript+jQuery入门第十三章表单效验
目录 1.JavaScript验证表单内容 2.表单选择器 3.表单属性过滤选择器 4.正则表达式 4.1 正则表达式的定义 4.2 表达式规则 4.3 正则表达式的使用方式 5.HTML5表单验证 ...
使用jquery.form.js实现form表单无刷新提交简单示例
2019独角兽企业重金招聘Python工程师标准>>> 直到今天,才发现JQuery原来有个Form表单插件,而且还是无刷新页面提交表单,看来自己还要多加强学习啊!不多说了,直接贴代 ...
jQuery学习之：Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
servlet html js提交表单,使用jquery.form.js实现form表单无刷新提交简单示例
直到今天,才发现JQuery原来有个Form表单插件,而且还是无刷新页面提交表单,看来自己还要多加强学习啊!不多说了,直接贴代码吧,代码比较简单! Servlet代码: package com.pro ...

企业网站前端制作实战教程 JQuery CSS JS HTML 登录表单验证

企业网站前端制作实战教程 JQuery CSS JS HTML 登录表单验证相关推荐

最新文章

热门文章