企业网站前端制作实战教程 JQuery CSS JS HTML 登录表单验证
生活随笔
收集整理的這篇文章主要介紹了
企业网站前端制作实战教程 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 */login.html
<!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 登录表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Webtrends网站运营分析解决方案简
- 下一篇： 前端学习（1318）:同步api和异步a