《登录页面HTMLCSSJS代码》由会员分享，可在线阅读，更多相关《登录页面HTMLCSSJS代码（6页珍藏版）》请在金锄头文库上搜索。
1、文档供参考，可复制、编制，期待您的好评与关注！ 网页效果截图：源码：HTML代码（login.html）表单登录页面 欢迎您的到来Username:Password:Login脚本已被禁用了，_.CSS代码（login.css）*padding:0;margin:0;body /* overflow:scroll; */font-family:Georgia;color:#000;.form-box width:470px;height:296px;margin:100px auto;border:3px #ADFF2F solid;background-color:#C5FF6D; bord
2、er-radius:8px;.welcom width:100%;height:52px;line-height:52px;text-align:center;font-size:30px;font-family:Microsoft YaHei;font-weight:bold;border-bottom:1px #ADFF2F solid;.input-box position:relative;width:100%;height:248px;padding-top:30px;.form-group width:100%;height:50px;line-height:50px;.form-
3、group label,.form-group input display:block;height:40px;font-size:16px;.submit-button button position:absolute;top:190px;left:2%;width:96%;height:42px;line-height:42px;border-style:none;border:2px #75FF58 solid;border-radius:3px;background-color:#86FF6D;.submit-button span font-size:20px;font-weight
4、:bold;JS代码：（login.js）$(function()/设定两个标志，判断是否满足提交的条件 var ok1=false;var ok2=false;/设定键盘事件，回车换行$(.form-control).keydown(function(event)/判断是否是回车键if(event.which = 13)if($(this).val().length = 0)elsevar currIndex = $(this).index(:input);$(:input:eq(+(currIndex+1)+).focus(););/ 验证用户名 $(inputid=username).b
5、lur(function()var nameform=$(this).val(); / 验证是否输入用户名if($(this).val() = )$(.nameinfo).html(用户名不能为空！);$(.nameinfo).css(color:red,font-family:KaiTi,font-size:16px);/ 验证用户名是否大于六位 else if($(this).val().length 6) $(.nameinfo).html(用户名至少为6位！);$(.nameinfo).css(color:red,font-family:KaiTi,font-size:16px); /
6、验证用户名格式是否正确 else if(!nameform.match(/a-zA-Za-zA-Z0-9*$/) $(.nameinfo).html(用户名格式不正确！);$(.nameinfo).css(color:red,font-family:KaiTi,font-size:16px);else$(.nameinfo).html(输入正确);$(.nameinfo).css(color:green,font-family:KaiTi,font-size:16px);/验证通过，将标志位置为trueok1 = true; );/验证密码$(inputid=password).blur(fu
7、nction() if($(this).val() = ) $(.passwordinfo).html(密码不能为空！);$(.passwordinfo).css(color:red,font-family:KaiTi,font-size:16px);else if($(this).val().length 6)$(.passwordinfo).html(密码至少为6位！);$(.passwordinfo).css(color:red,font-family:KaiTi,font-size:16px);else$(.passwordinfo).html(输入正确);$(.passwordinfo).css(color:green,font-family:KaiTi,font-size:16px);ok2 = true; );/输入不合法的情况下，获取焦点时清空错误输入$(inputid=username).focus(function()if(!ok1)$(inputid=username).val(););$(inputid=password).focus(function()if(!ok2)$(inputid=password).val(););/点击进行用户名后台验
