两个.aspx文件,一个是Validation.aspx,一个是Default.aspx。这个例子基本实现了输入控件中日期的验证。
1.Validation.aspx中文件的代码:
Code
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Validation.aspx.cs" Inherits="_Default" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml" >
6<head runat="server">
7 <title>Using Ajax for validation</title>
8 <script type="text/javascript" src="Validation.js">
9 </script>
10</head>
11<body>
12 <form id="form1" runat="server">
13 <div>
14 <h1>Ajax Validation Example</h1>
15 Birth date:
16 <input type="text" size="10" id="birthDate" name="birthDate" onkeydown="validation()" />
17 <div id="dateMessage"></div>
18 </div>
19 </form>
20
21
22</body>
23</html>
24
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Validation.aspx.cs" Inherits="_Default" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5<html xmlns="http://www.w3.org/1999/xhtml" >
6<head runat="server">
7 <title>Using Ajax for validation</title>
8 <script type="text/javascript" src="Validation.js">
9 </script>
10</head>
11<body>
12 <form id="form1" runat="server">
13 <div>
14 <h1>Ajax Validation Example</h1>
15 Birth date:
16 <input type="text" size="10" id="birthDate" name="birthDate" onkeydown="validation()" />
17 <div id="dateMessage"></div>
18 </div>
19 </form>
20
21
22</body>
23</html>
24
2. 下面是Validation.js代码
Code
1// JScript 文件
2var xmlHttp;
3
4function createXMLHttpRequest()
5{
6 if(window.ActiveXObject)
7 {
8 xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
9 }
10 else
11 {
12 xmlHttp=new XMLHttpRequest();
13 }
14}
15
16function validation()
17{
18 createXMLHttpRequest();
19 var date=document.getElementById("birthDate");
20 var url="Default.aspx?birthDate="+escape(date.value);
21 xmlHttp.open("GET",url,true);
22 xmlHttp.onreadystatechange=callback;
23 xmlHttp.send(null);
24}
25
26function callback()
27{
28 if(xmlHttp.readyState==4)
29 {
30 if(xmlHttp.status==200)
31 {
32 var mes=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
33 var val=xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
34 setMessage(mes,val);
35 }
36 }
37}
38
39function setMessage(message,isValid)
40{
41 var messageArea=document.getElementById("dateMessage");
42 var fontColor="red";
43 if(isValid=="true")
44 {
45 fontColor="green";
46 }
47 messageArea.innerHTML="<font color="+fontColor+">"+message+"</font>";
48}
49
50
51
1// JScript 文件
2var xmlHttp;
3
4function createXMLHttpRequest()
5{
6 if(window.ActiveXObject)
7 {
8 xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
9 }
10 else
11 {
12 xmlHttp=new XMLHttpRequest();
13 }
14}
15
16function validation()
17{
18 createXMLHttpRequest();
19 var date=document.getElementById("birthDate");
20 var url="Default.aspx?birthDate="+escape(date.value);
21 xmlHttp.open("GET",url,true);
22 xmlHttp.onreadystatechange=callback;
23 xmlHttp.send(null);
24}
25
26function callback()
27{
28 if(xmlHttp.readyState==4)
29 {
30 if(xmlHttp.status==200)
31 {
32 var mes=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
33 var val=xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
34 setMessage(mes,val);
35 }
36 }
37}
38
39function setMessage(message,isValid)
40{
41 var messageArea=document.getElementById("dateMessage");
42 var fontColor="red";
43 if(isValid=="true")
44 {
45 fontColor="green";
46 }
47 messageArea.innerHTML="<font color="+fontColor+">"+message+"</font>";
48}
49
50
51
3.最后是Default.aspx的代码
Code
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2
3
1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2
3
4.Default.aspx.cs的代码:
Default.aspx.cs
1using System;
2using System.Data;
3using System.Configuration;
4using System.Collections;
5using System.Web;
6using System.Web.Security;
7using System.Web.UI;
8using System.Web.UI.WebControls;
9using System.Web.UI.WebControls.WebParts;
10using System.Web.UI.HtmlControls;
11
12public partial class _Default : System.Web.UI.Page
13{
14 protected void Page_Load(object sender, EventArgs e)
15 {
16 bool passed = validateDate(Request.QueryString["birthDate"]);
17
18 string message = "You have entered an invalid date";
19 if (passed)
20 {
21 message = "You have entered an valid date";
22 }
23
24 string xml = "<response><passed>" + passed.ToString() + "</passed><message>" + message + "</message></response>";
25 //Response.Write("<passed>" + passed.ToString() + "</passed>");
26 //Response.Write("<message>" + message + "</message>");
27 Response.ClearContent();
28 Response.Cache.SetNoStore();
29 Response.ContentType = "text/xml";
30 Response.ContentEncoding = System.Text.Encoding.UTF8;
31
32 Response.Write(xml);
33 }
34
35
36 public bool validateDate(string date)
37 {
38 bool isValid = true;
39 if (date != null)
40 {
41 try
42 {
43 //string tempStr = string.Format("{0,d}", date);
44 Convert.ToDateTime(date);
45
46 }
47 catch (Exception e)
48 {
49 isValid = false;
50 }
51 }
52 else
53 {
54 isValid = false;
55 }
56 return isValid;
57 }
58}
59
1using System;
2using System.Data;
3using System.Configuration;
4using System.Collections;
5using System.Web;
6using System.Web.Security;
7using System.Web.UI;
8using System.Web.UI.WebControls;
9using System.Web.UI.WebControls.WebParts;
10using System.Web.UI.HtmlControls;
11
12public partial class _Default : System.Web.UI.Page
13{
14 protected void Page_Load(object sender, EventArgs e)
15 {
16 bool passed = validateDate(Request.QueryString["birthDate"]);
17
18 string message = "You have entered an invalid date";
19 if (passed)
20 {
21 message = "You have entered an valid date";
22 }
23
24 string xml = "<response><passed>" + passed.ToString() + "</passed><message>" + message + "</message></response>";
25 //Response.Write("<passed>" + passed.ToString() + "</passed>");
26 //Response.Write("<message>" + message + "</message>");
27 Response.ClearContent();
28 Response.Cache.SetNoStore();
29 Response.ContentType = "text/xml";
30 Response.ContentEncoding = System.Text.Encoding.UTF8;
31
32 Response.Write(xml);
33 }
34
35
36 public bool validateDate(string date)
37 {
38 bool isValid = true;
39 if (date != null)
40 {
41 try
42 {
43 //string tempStr = string.Format("{0,d}", date);
44 Convert.ToDateTime(date);
45
46 }
47 catch (Exception e)
48 {
49 isValid = false;
50 }
51 }
52 else
53 {
54 isValid = false;
55 }
56 return isValid;
57 }
58}
59
5.不足之处:
- 在输入控件birthDate中,事件中使用的onkeydown,《Ajax基础教程》中使用的是onchange事件,但是在程序中却无法执行。不明白是什么原因?
- 因为使用事件是onkeydown事件,感觉验证还是有那么点问题?
- 在js文件中,setMessage()函数无法正确设置颜色,不晓得什么原因?