jquery用户验证

feiyang10086

jquery用户验证

1、首先引入jquery-1.3.2.js，将其放在js文件夹下。

2、为文本框的边框定义样式文件 style.css,放在css文件夹下，其内容如下：

1. .tbText
   
2. {
   
3. /*控制边框的是1px的实心红色线*/
   
4. border:1px solid red;
   
5. background-image:url(../images/tb_underline.gif);
   
6. background-repeat:repeat-x;
   
7. background-position:bottom;
   
8. }

复制代码

3、编写js.js文件，放在js文件夹下，内容如下：

1. 
   
2. $(document).ready(function() {
   
3. //页面装载完成后执行的操作
   
4. var userNode = $("#tbusername");
   
5. //找到按钮，并注册事件
   
6. $("#btnCheck").click(function() {
   
7. //获取文本框的内容
   
8. var uname = userNode.val();
   
9. //将获取到的内容发送到服务器端
   
10. if (uname == "") {
    
11. alert("用户名不能为空！");
    
12. }
    
13. else {
    
14. $.get("CheckUserName.aspx?username=" + uname, function(response) {
    
15. //接收服务器端返回的数据并显示在页面当中
    
16. $("#msg").html(response);
    
17. });
    
18. }
    
19. });
    
20. //找到文本框，并注册事件
    
21. userNode.keyup(function() {
    
22. //获取文本框的内容
    
23. var value = userNode.val();
    
24. if (value == "") {
    
25. //边框变色
    
26. userNode.addClass("tbText");
    
27. }
    
28. else {
    
29. //边框去色
    
30. userNode.removeClass("tbText");
    
31. }
    
32. });
    
33. }
    
34. );
    

复制代码

4、输入页面Default.aspx

1. 
   
2. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
   
3. 
   
4. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
5. 
   
6. < html xmlns="http://www.w3.org/1999/xhtml">
   
7. < head runat="server">
   
8. <title>jquery用户验证信息</title>
   
9. <script src="jquery/jquery-1.3.2.js" type="text/javascript"></script>
   
10. <script src="js/js.js" type="text/javascript"></script>
    
11. <link href="css/style.css" rel="stylesheet" type="text/css" />
    
12. < /head>
    
13. < body>
    
14. <form id="form1" runat="server">
    
15. <div>
    
16. <table>
    
17. <tr>
    
18. <td>用户名:</td>
    
19. <td><input id="tbusername" type="text" class="tbText"/></td>
    
20. <td><span id="msg"></span></td>
    
21. <td><input id="btnCheck" type="button" value="验证" /></td>
    
22. </tr>
    
23. </table>
    
24. </div>
    
25. </form>
    
26. < /body>
    
27. < /html>

复制代码

5、请求处理页面CheckUserName.aspx

1. 
   
2. using System;
   
3. using System.Collections.Generic;
   
4. using System.Linq;
   
5. using System.Web;
   
6. using System.Web.UI;
   
7. using System.Web.UI.WebControls;
   
8. 
   
9. public partial class CheckUserName : System.Web.UI.Page
   
10. {
    
11. protected void Page_Load(object sender, EventArgs e)
    
12. {
    
13. if (!IsPostBack)
    
14. {
    
15. string name = Request.QueryString["username"];
    
16. 
    
17. //Response.ClearHeaders();
    
18. //Response.Clear();
    
19. //Response.ClearContent();
    
20. //Response.ContentType = "text/plain";
    
21. 
    
22. Response.Write(returnResult(name));
    
23. Response.End();
    
24. }
    
25. }
    
26. 
    
27. public string returnResult(string name)
    
28. {
    
29. 
    
30. //这里为了演示，仅作简单处理，这里和数据库进行交互处理，大家都懂的，根据需要进行处理即可
    
31. string ret = string.Empty;
    
32. if (name == "admin")
    
33. {
    
34. ret = "账户[" + name + "]可以注册!";
    
35. }
    
36. else
    
37. {
    
38. ret = "账户[" + name + "]已经注册!";
    
39. }
    
40. return ret;
    
41. }
    
42. }

复制代码