javascript页面登陆

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript页面登陆相关的知识，希望对你有一定的参考价值。

一个简单的登陆合法性检测，就是我要求用户名不能为空，或者还有些其它要求，正则表达式，这个我知道写，我就是不知道，就是它出现的那个提示怎么加进去，用if进行判断，里面不能用Alert()显示提示信息，onblue()时我需要在Input框后面加入一个也是就是createTestChild（）显示。这个我也成功了，可是当我onfouce()时怎么删除加进去的那句话呀！！！！！！！！！！！！！！急求，感谢感谢感谢！！！
</HEAD>

<BODY>
<FORM METHOD=POST ACTION="" name="form" >
<TABLE align="center" >
<TR>
<td>用户名:</td><td>
<input type="text" name="test" onBlur="checkName(this)" onfocus="removethisTip(this)"></td>

</TR>
<tr>
<td>密  码:</td><td><input type="text" name="test"></td>
</tr>
<tr>
<td>确  认:</td><td><input type="text" name="test"></td>
</tr>
<tr>
<td>邮  箱:</td><td><input type="text" name="test"></td>
</tr>

你说的createTestChild()是自己写的函数吧，汗。。 拜托说明白点。其实你可以直接在文本框后面加个<span>标签来显示验证信息，具体代码如下：

<script>

function checkName(obj)
var isNull = /^$/;
if(isNull.test(obj.value))
document.getElementById("info").innerhtml="用户名不能为空！";


function removethisTip()
document.getElementById("info").innerHTML = "";

</script>
<BODY>
<FORM METHOD=POST ACTION="" name="form" >
<TABLE align="center" >
<TR>
<td>用户名:</td><td>
<input type="text" name="username" onBlur="checkName(this)" onfocus="removethisTip(this)">
<span id="info"></span>
</td>
<TR> 参考技术A 可以给你提示个，用this.parentNode.removeChild() 方法。因为你说的太模糊，我也不知你说的是什么了。。。 参考技术B 利用css控制，当输入的数据不符合要求时，显示某个div

用AJAX实现页面登陆以及注册用户名验证

 AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

       AJAX 是一种用于创建快速动态网页的技术。其核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

       通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
    
       试想如果在注册时，提交了注册信息，等了几秒后页面重载了，结果弹出一个提示框告诉你“用户名已被使用”，那将是很令人恼火的一件事。所以在这里，使用AJAX实现异步请求，即可在不重载页面的情况下实现与数据库的通讯。


      

创建XMLHTTPRequest对象
      使用javascript在html页面中创建XMLHTTPRequest对象，实现AJAX异步请求：
     

  

[html] view plain copy
 
 print?
  1. <span style="font-size:14px;">       var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);  
  2.             xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true);  
  3.             xmlhttp.onreadystatechange = function ()  
  4.             {  
  5.                 if (xmlhttp.readyState == 4)  
  6.                 {  
  7.                     if (xmlhttp.status == 200)  
  8.                     {  
  9.                         alert(xmlhttp.responseText);  
  10.                     }  
  11.                     else  
  12.                     {  
  13.                         alert("AJAX服务器返回错误！");  
  14.                     }  
  15.                 }  
  16.             }  
  17.             xmlhttp.send();   
  18.   
  19.   
  20. </span>  

 

           var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘); //创建XMLHTTP对象，考虑兼容性

            xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); //“准备”向服务器的GetDate1.ashx发出Post请求（GET可能会有缓存问题）。这里还没有发出请求。

            readyState == 4 表示服务器返回完成数据了。之前可能会经历2（请求已发送，正在处理中）、3（响应中已有部分数据可用了，但是服务器还没有完成响应的生成）

             注意：    不要以为if (xmlhttp.readyState == 4) 在send之前执行就觉得不对， xmlhttp.send(); 这时才开始发送请求。这时才开始发送请求后不等服务器返回数据，就继续向下执行，所以不会阻塞，界面就不卡了，这就是AJAX中“A”的含义“异步”。

AJAX的封装

        在实际项目开发中，会有多处用到AJAX异步请求，可是创建对象代码这么长，复制粘贴都嫌麻烦，而且还会影响代码的观赏性，所以需要将AJAX进行封装。将其封装成js功能文件，并在网页中导入即可进行引用。
        
        简单AJAX封装后代码：

[javascript] view plain copy
 
 print?
  1. <span style="font-family:Times New Roman;font-size:14px;">         function ajax(url,onsuccess,onfail)  
  2.         {  
  3.             var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);  
  4.             xmlhttp.open("POST", url, true);  
  5.             xmlhttp.onreadystatechange = function ()  
  6.             {  
  7.                 if (xmlhttp.readyState == 4)  
  8.                 {  
  9.                     if (xmlhttp.status == 200)  
  10.                     {  
  11.                         onsuccess(xmlhttp.responseText);//成功时逻辑操作  
  12.                     }  
  13.                     else  
  14.                     {  
  15.                         onfail(xmlhttp.status);//失败是逻辑操作  
  16.                     }  
  17.                 }  
  18.             }  
  19.             xmlhttp.send(); //这时才开始发送请求  
  20.         }</span>  



封装完成后，我们可以开始写登陆判断代码(我是用的是.net)：
       首先，创建一个html页login.htm以及ashx一般处理程序userhandle.ashx，请求的url中带上一个action参数，在一般处理程序中对请求进行处理。


[javascript] view plain copy
 
 print?
  1. function Submit1_onclick() {  
  2.             var name = document.getElementById("name").value;  
  3.             var psw = document.getElementById("psw").value;  
  4.             if (psw != "" && name != "") {   
  5.              //调用AJAX  
  6.              ajax("../userhandle.ashx?operate=login&userName=" + name + "&psw=" + psw, function (resText) {  
  7.                     if (resText == "fail") {  
  8.                         alert("用户名或密码错误！");  
  9.                         return false;  
  10.                     }  
  11.                     else {  
  12.                         document.write(resText);  
  13.                     }  
  14.                 })  
  15.             }  
  16.             else {  
  17.                 alert("请输入完整登陆信息！");  
  18.                 return false;  
  19.             }  
  20.         }  
在一般处理程序中接到请求动作，判断并执行相关查询，返回一个字符串，前台页面接到后，判断并执行相应功能。

[javascript] view plain copy
 
 print?
  1. public void login(HttpContext context)  
  2.        {  
  3.            userBLL ub = new userBLL（）；  
  4.            string userName = context.Request["userName"];  
  5.            string userPsw = context.Request["psw"];        
  6.            bool b = ub.Login(userName, userPsw);//封装好的bll层方法，判断用户名密码是否正确  
  7.            if (b == true)  
  8.            {  
  9.                context.Session["Name"] = userName;  
  10.                context.Session["role"] = "user";  
  11.                context.Response.Write("success");  
  12.            }  
  13.            else  
  14.            {  
  15.                context.Response.Write("fail");  
  16.            }  
  17.        }  

服务器判断完后，将success或者fail发送到客户端。这样一个使用AJAX异步请求实现登陆就完成了。

至于注册是判断用户名，我就只粘贴上来：

[javascript] view plain copy
 
 print?
  1. function check() {  
  2.             var userName = document.getElementById("Text1").value;  
  3.             if (userName == "" || userName == null) {  
  4.                 document.getElementById("nameMeg").style.color = "red";  
  5.                 document.getElementById("nameMeg").innerHTML = "用户名为6-10位英文或数字";  
  6.             }  
  7.             else {   
  8.             ajax("../userhandle.ashx?operate=checkName&userName=" + userName, function (resText) {  
  9.                 if (resText == "forbid") {  
  10.                     document.getElementById("nameMeg").style.color = "red";  
  11.                     document.getElementById("nameMeg").innerHTML = "用户名含有非法词语";  
  12.                 } else if (resText == "already have") {  
  13.                     document.getElementById("nameMeg").style.color = "red";  
  14.                     document.getElementById("nameMeg").innerHTML = "用户名已被使用";  
  15.                 } else {  
  16.                     document.getElementById("nameMeg").style.color = "green";  
  17.                     document.getElementById("nameMeg").innerHTML = "可以使用";  
  18.                 }  
  19.             })  
  20.             }  
  21.         }  

































以上是关于javascript页面登陆的主要内容，如果未能解决你的问题，请参考以下文章

javascript--自定义弹出登陆窗口（弹出窗）

document.form1是啥意思啊 jsp登陆页面javascript的语句

用AJAX实现页面登陆以及注册用户名验证

WEB程序设计（后台登陆页面和用户注册页面设计）

Javascript：重定向到不同的子域

Javascript：重定向到不同的子域