今天成功测试一种js登录特效+ajax提交表单+异步刷新验证，登录时特效提醒，无刷新ajax提交表单，获取验证结果，跳转正式页面：废话不多说，先直接分享代码：
1、主界面index.php 加载的这两项，网上可以下载
<script type="text/javascript" src="/keshe/js/jquery.min.js"></script><script type="text/javascript" src="/keshe/js/jquery.form.js"></script>
<?phpsession_start();$_SESSION['user']=null;?><!DOCTYPE HTML><html><head><title>雏出宾馆客房管理系统</title><meta charset="UTF-8"><script type="text/javascript" src="/keshe/js/jquery.min.js"></script><script type="text/javascript" src="/keshe/js/jquery.form.js"></script><script type="text/javascript" src="/keshe/js/tooltips.js"></script><script type="text/javascript">//支持Enter键登录document.onkeydown = function(e){if(!e) e = window.event;if((e.keyCode || e.which) == 13){var obtnLogin=document.getElementById("submit_btn")obtnLogin.focus();}}$(function(){//提交表单$('#submit_btn').click(function(){show_loading();//var myReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //正则if($('.user').val() == ''){show_err_msg('账号还没填呢！');$('.user').focus();}else if($('.password').val() == ''){show_err_msg('密码还没填呢！');$('.password').focus();}else{//ajax提交表单$.post('access.php',{username:$("#input1").val(),age:$("#input2").val(),},function (data) { //回调函数if(data=='1'){show_msg('登录成功，正在为您跳转...','index');}else if(data=='2'){show_err_msg('密码输入错误！');$('.password').focus();}else if(data=='3'){show_err_msg('该用户不存在！');$('.user').focus();}});//show_msg('正在登陆...');//ajax提交表单，#login_form为表单的ID。 如：$('#login_form').ajaxSubmit(function(data) { ... });//show_msg('登录成功咯！ 正在为您跳转...','http://www.');}});});</script><style type="text/css">* html,* html body{background-image:url(about:blank);background-attachment:fixed;}html{color:#000;background-color:#F2F2F2;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}img,button,input {vertical-align:middle;border:none;}label{font-size:12px;color:#666;cursor:pointer;}a,span{color:#666;font-size:12px;text-decoration:none;}a:hover{text-decoration:underline;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul,li{list-style:none;list-style-type: none;}h1,h2,h3,h4,h5,h6{font-size:100%;overflow:hidden;}header {width:660px;margin:0 auto;font-size:28px;font-weight:bold;margin-top:20px;color:#ccc;text-shadow:1px 1px 1px #fff;font-family: 'revolt',georgia,'Microsoft yahei';}.content {width:360px;margin:250px 700px auto;padding:30px 40px;border:2px solid #ccc;border-radius:10px;box-shadow:0 0 30px #ccc;background-color:white;}.ipt {border:1px solid #ddd;padding:10px 5px;width: 240px;outline:none;border-radius:3px;background-color:#fff;font-family: 'revolt',georgia,'Microsoft yahei';}.ipt:focus {background-color:#fefefe;box-shadow:0 0 3px #aaa;}.thead {font-weight:bold;font-size:20px;padding-bottom:20px!important;text-shadow:1px 1px 1px #fff;}.content th {color:#666;font-size:12px;font-weight:bold;text-shadow: 1px 1px 1px #fff;}.content td {padding:5px 0;}#submit_btn {background-color:#4797ED;border:none;border-radius:10px;box-shadow:0 0 3px #aaa;width:198px;height:41px;line-height:41px;color:#fff;font-size:18px;font-weight:bold;cursor:pointer;margin-right:20px;display:block;outline:none;text-shadow:0 1px 1px #777;float:left;}#submit_btn:hover {background-color:#d8d8d8;color:#666;text-shadow:1px 1px 1px #fff;}#forget:hover{text-decoration:none;}.line {float:left;margin-top:10px;}.pd15 {padding-top:15px!important;}.red {color:red;}.beijing{z-index:-2;width:1100px;height:600px;margin:auto auto;padding:30px 40px;border:2px solid #ccc;border-radius:10px;box-shadow:0 0 30px #ccc;background:url(images/beijing.jpg);}</style></head><body><div class="beijing"><div class="content"><form method="post" id="login_form"><table width="100%"><thead><td colspan="2" class="thead">雏出宾馆客房管理系统</td></thead><tbody><tr><th><em class="red">*</em> 账号：</th><td><input type="text" value="" name="" id="input1" class="user ipt"></td></tr><tr><th><em class="red">*</em> 密码：</th><td><input type="password" value="" name="" id="input2" class="password ipt"></td></tr><tr><th class="pd15"></th><td class="pd15"><button id="submit_btn" type="button">登录</button><p class="line"><a href="forget.php" id="forget" >忘记密码？</a></p></td></tr></tbody></table></form></div></div> </body></html>
2、后边信息验证：access.php
<?phpsession_start();header("Content-type: text/html; charset=utf-8");error_reporting(0);if (!empty($_POST)) {$conn=@mysql_connect("localhost","root" ,"guo941102");mysql_select_db('kese',$conn);mysql_query("set names utf8") or die(mysql_errno());$data = $_POST;$user=$_POST['username'];$mima=$_POST['age'];$sql="select adpass from admins where adid='$user'";$result=mysql_query($sql);$row=mysql_fetch_assoc($result); if($row){if($row['adpass']==$mima){$_SESSION['user']=$user;echo "1";//登录成功}else{echo "2";//密码错误}}else{echo "3";//用户不存在} //print json_encode($user);}?>
tooltips.js这里是提示时调用的显示
var msgdsq;//错误时：提示调用方法function show_err_msg(msg){$('.msg_bg').html('');clearTimeout(msgdsq);$('body').append('<div class="sub_err" style="position:absolute;top:60px;left:0;width:500px;z-index:999999;"></div>');var errhtml='<div style="padding:8px 0px;border:1px solid #ff0000;width:100%;margin:0 auto;background-color:#fff;color:#B90802;border:3px #ff0000 solid;text-align:center;font-size:16px;font-family:微软雅黑;"><img style="margin-right:10px;" src="images/error.png">';var errhtmlfoot='</div>'; $('.msg_bg').height($(document).height());$('.sub_err').html(errhtml+msg+errhtmlfoot);var left=($(document).width()-500)/2;$('.sub_err').css({'left':left+'px'});var scroll_height=$(document).scrollTop(); $('.sub_err').animate({'top': scroll_height+120},300);msgdsq=setTimeout(function(){$('.sub_err').animate({'top': scroll_height+80},300);setTimeout(function(){$('.msg_bg').remove();$('.sub_err').remove();},300);}, "1000"); }//正确时：提示调用方法function show_msg(msg,url){$('.msg_bg').html('');clearTimeout(msgdsq);$('body').append('<div class="sub_err" style="position:absolute;top:60px;left:0;width:500px;z-index:999999;"></div>');var htmltop='<div style="padding:8px 0px;border:1px solid #090;width:100%;margin:0 auto;background-color:#FFF2F8;color:#090;border:3px #090 solid;;text-align:center;font-size:16px;"><img style="margin-right:10px;" src="images/success.png">';var htmlfoot='</div>';$('.msg_bg').height($(document).height());var left=($(document).width()-500)/2;$('.sub_err').css({'left':left+'px'});$('.sub_err').html(htmltop+msg+htmlfoot);var scroll_height=$(document).scrollTop(); $('.sub_err').animate({'top': scroll_height+120},500); msgdsq=setTimeout(function(){ $('.sub_err').animate({'top': scroll_height+80},500);setTimeout(function(){$('.msg_bg').remove();$('.sub_err').remove();if(url!=''){location.href=url;} },800); }, "1200"); }//显示加载动画function show_loading(){var str='<div class="msg_bg" style="background:#000;opacity:0.5;filter:alpha(opacity=50);z-index:99998;width:100%;position:absolute;left:0;top:0"></div>';str+='<div class="msg_bg" style="z-index:99999;width:100%;position:absolute;left:0;top:0;text-align:center;"><img src="images/loading.gif" alt="" class="loading"></div>'$('body').append(str);var scroll_height=$(document).scrollTop(); $('.msg_bg').height($(document).height());$('.loading').css('margin-top',scroll_height+240);}
里边的加载动画，网上到处都是。。。。
借鉴，测试终于调试成功，留存下来备用。
另外发现了一个小的标签：<label> 标签中有个for ，一开始，还不知道，原来是为谁添加的标签，通过id名来传递
![Ajax提交留言并实时显示的js代码[修正版]_表单特效](https://100zi.50zi.cn/uploadfile/img/14/555/84e9cc7de21a065605c95587ef38776a.jpg)
