站在巨人的肩上

Standing on Shoulders of Giants
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Delphi基于HTML页面和XML实现表单填写

Posted on 2010-04-13 22:36  姚箫  阅读(3701)  评论(0)    收藏  举报

请先看效果，为了达到这个效果，需要完成HTML界面、XML数据存储结构定义、JavaScript数据验证和保存、Delphi实现桌面程序调用4个方面。桌面程序也可以用VB、VC、.NET来实现，道理类似。

1、编写HTML页面

 

代码
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title>图斑登记表</title>
  5     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  6     <link href="style.css" type="text/css" rel="stylesheet" />
  7 
  8     <script language="javascript" src="ccir.js"></script>
  9 
 10     <script language="javascript" src="MyZbjc.js" charset="gb2312"></script>
 11 
 12     <script language="javascript" src="AddWeiPian.js" charset="gb2312"></script>
 13 
 14     <script type="text/javascript" src="DateSelectLayer.js"></script>
 15 
 16 </head>
 17 <body onload="InitWeiPianDataShow()" scroll="no" oncontextmenu="return false;">
 18     <form id="form1">
 19     <table id="table9" style="background-color: #ffffff; width: 580px" cellspacing="1"
 20         cellpadding="2" border="0" align='center'>
 21         <tr style="height: 30px" valign='top'>
 22             <td align='left'>
 23                 <span style="color: red">*</span>填表人：<input type='text' id="Text5" class="Input_TextBox"
 24                     datasrc="#XmlDoc" datafld="reportunit" />
 25             </td>
 26             <td style="width: 200px" align='right'>
 27                 <span style="color: red">*</span>填表时间：<input type='text' id="Text6" class="Input_DateBox"
 28                     onclick="fn_SelectDate('document.all.Text6.value')" readonly datasrc="#XmlDoc"
 29                     datafld="reportdate" />
 30             </td>
 31         </tr>
 32     </table>
 33     <table id="table1" style="background-color: #333333; width: 580px" cellspacing="1"
 34         cellpadding="2" border="0" align='center'>
 35         <tr style="background-color: #99ccff; height: 25px">
 36             <td align="center" colspan="2">
 37                 <span style='font-size: 12.0pt; font-family: 黑体'>基 本 情 况</span>
 38             </td>
 39         </tr>
 40         <tr style="background-color: white; height: 25px">
 41             <td style="background-color: #EEEEEE" align='right'>
 42                 <span style="color: red">*</span>地块编号：
 43             </td>
 44             <td width="400px">
 45                 <input type='text' id="Text1" class="Input_TextBox" style="width: 95%" onkeyup="ClearNoNum2(this)"
 46                     onchange="ClearNoNum2(this)" datasrc="#XmlDoc" datafld="areanumber" title="只能由数字、“-”组成" />
 47             </td>
 48         </tr>
 49         <tr style="background-color: white; height: 25px">
 50             <td style="background-color: #EEEEEE" align='right'>
 51                 <span style="color: red">*</span>用地面积：
 52             </td>
 53             <td>
 54                 <input type='text' id="Text4" class="Input_NumberBox" style="width: 90%" onkeyup="dot(this)"
 55                     onchange="dot(this)" datasrc="#XmlDoc" datafld="parcelarea" />亩
 56             </td>
 57         </tr>
 58         <tr style="background-color: white; height: 25px">
 59             <td align='right' style="background-color: #EEEEEE">
 60                 <span style="color: red">*</span>图斑编号：
 61             </td>
 62             <td>
 63                 <input type='text' id="Text2" class="Input_TextBox" style="width: 95%" onkeyup="ClearNoNum3(this)"
 64                     onchange="ClearNoNum3(this)" datasrc="#XmlDoc" datafld="imagenumber" title="只能由数字、逗号组成，多个图斑之间用逗号隔开" />
 65                 <a href='#' style='color: red; display: none' onclick="javascript:ShowImageNumber();">
 66                     查看原始图斑坐标</a>
 67             </td>
 68         </tr>
 69         <tr style="background-color: white; height: 25px">
 70             <td align='right' style="background-color: #EEEEEE">
 71                 <span style="color: red">*</span>用地位置：
 72             </td>
 73             <td>
 74                 <input type='text' id="Text3" class="Input_TextBox" style="width: 95%" datasrc="#XmlDoc"
 75                     datafld="address" />
 76             </td>
 77         </tr>
 78     </table>
 79     <br />
 80     <input type="hidden" id="Hidden1" />
 81     <input type='hidden' id="Hidden2" />
 82     <input type='hidden' id="Hidden3" />
 83     <input type="hidden" id="Hidden4" />
 84     <input type='hidden' id="Hidden5" />
 85     <input type='hidden' id="Hidden6" />
 86     <input type="hidden" id="hidImageName1" />
 87     <input type="hidden" id="hidImageName2" />
 88     <input type="hidden" id="Hidden14" value="1" />
 89     <input type='hidden' id="Hidden15" value="1" />
 90     <input type='hidden' id="Hidden16" value="1" />
 91     <input type='hidden' id="Hidden101" value="" />
 92     <input type='hidden' id="Hidden102" value="" />
 93     <xml id="xmlData" src="data.xml">
 94     </xml>
 95     <xml id="XmlDoc" src="AddWeiPianForm.xml" encoding="gb2312">
 96     </xml>
 97     </form>
 98 </body>
 99 </html>
100 

 

2、定义XML表单数据存储结构

 

代码
 1 <?xml version="1.0" encoding="GB2312"?>
 2 <root Type="1" Ver="1.0">
 3     <id></id>
 4     <areanumber>22</areanumber>
 5     <imagenumber>22</imagenumber>
 6     <address></address>
 7     <parcelarea>22</parcelarea>
 8     <reportunit>adf</reportunit>
 9     <reportdate>2010-02-10</reportdate>
10 </root>

 

3、添加JavaScript脚本语言，帮助检查页面数据

 

代码
  1 
  2 function InitWeiPianDataShow()
  3 {
  4     if (XmlDoc == null)
  5         return;
  6     if (XmlDoc == null || XmlDoc.documentElement.childNodes.length <= 0)
  7         return;
  8     var node = null;
  9 
 10     document.all.Text1.focus();
 11 }
 12 
 13 function IsEnAndNum(str, nType)
 14 {
 15     if (nType == 1) str = str.replace(/-/g, '');
 16     else if (nType == 2) str = str.replace(/-/g, '').replace(/,/g, '');
 17     var reg = /^[a-z0-9.]*$/gi
 18     if (reg.test(str)) return true
 19     else return false;
 20 }
 21 
 22 function testImageNumber(str)
 23 {
 24     var array = str.split(',');
 25     for (var i = 0; i < array.length; i++)
 26     {
 27         if (array[i].Trim() == "") continue;
 28         //if(array[i].Trim().
 29     }
 30 }
 31 
 32 
 33 function TestDateValid(strDate)
 34 {
 35     if (strDate == "") return true;
 36 
 37     //判断时间是否合法
 38     var strs = strDate.split('-');
 39     if (strs.length > 3) return false; //原来是2，kez修改
 40     //现在是对年度进行检测
 41     if (isNaN(strs[0])) return false;
 42     var date = new Date();
 43     var year = date.getYear();
 44     if (parseInt(strs[0], 10) < 1949) return false;
 45     if (parseInt(strs[0], 10) > year) return false;
 46     if (strs.length == 1) return true;
 47     if (isNaN(strs[1])) return false;
 48     if (parseInt(strs[1], 10) < 1) return false;
 49     if (parseInt(strs[1], 10) > 12) return false;
 50 
 51     return true;
 52 }
 53 
 54 
 55 function TestIsValid()
 56 {
 57     //检验数据是否有效
 58     //1、暂存 2、提交
 59     if (XmlDoc == null || XmlDoc.documentElement.childNodes.length <= 0)
 60     {
 61         alert('基础数据不存在！请重新加载该页面。');
 62         return false;
 63     }
 64 
 65     var x = 0.0;
 66     var y = 0.0;
 67     var z = 0.0;
 68 
 69     if (document.all.Text5.value.Trim() == "")
 70     {
 71         alert('填表人不能为空！');
 72         document.all.Text5.focus();
 73         return false;
 74     }
 75 
 76     if (document.all.Text6.value.Trim() == "")
 77     {
 78         alert('填表时间不能为空！');
 79         document.all.Text6.focus();
 80         return false;
 81     }
 82 
 83     if (document.all.Text1.value.Trim() == "") 
 84     {
 85         alert('宗地编号不能为空！');
 86         document.all.Text1.focus();
 87         return false;
 88     }
 89 
 90     if (document.all.Text1.value.Trim() != "")
 91     {
 92         if (!IsEnAndNum(document.all.Text1.value.Trim(), 1))
 93         {
 94             alert('宗地编号中含有非法字符,宗地编号只能是由字母、数字或' - '组成！');
 95             document.all.Text1.focus();
 96             return false;
 97         }
 98         if (document.all.Text1.value.Trim().substring(0, 1) == '-')
 99         {
100             alert('宗地编号第一个字符不能为' - '！');
101             document.all.Text1.focus();
102             return false;
103         }
104     }
105 
106     if (document.all.Text4.value.Trim() == "")
107     {
108         alert('用地面积不能为空！');
109         document.all.Text4.focus();
110         return false;
111     }
112 
113     if (document.all.Text2.value.Trim() == "")
114     {
115         alert('图斑编号不能为空！');
116         document.all.Text2.focus();
117         return false;
118     }
119 
120     if (!IsEnAndNum(document.all.Text2.value.Trim(), 2))
121     {
122         alert('图斑编号中含有非法字符,图斑编号只能是由字母、数字、逗号或' - '组成，多个图斑编号用逗号分隔！');
123         document.all.Text2.focus();
124         return false;
125     }
126 
127     if (document.all.Text2.value.Trim().substring(0, 1) == '-')
128     {
129         alert('图斑编号第一个字符不能为' - '！');
130         document.all.Text2.focus();
131         return false;
132     }
133 
134     if (document.all.Text3.value.Trim() == "")
135     {
136         alert('用地位置不能为空！');
137         document.all.Text3.focus();
138         return false;
139     }
140 
141     return true;
142 }
143 
144 
145 function UpdateWeiPianManageData()
146 {
147     if (!TestIsValid()) return false;
148 
149     var node = null;
150     var strTemp = "";
151 
152     var strXml = XmlDoc.xml;
153 
154     return true;
155 }
156 
157 function SaveData()
158 {
159     if (!UpdateWeiPianManageData()) return "";
160     if (XmlDoc == null) return "";
161     var nIndex = -1;
162     var str = "";
163 
164     XmlDoc.encoding = "gb2312";
165     document.focus();
166 
167     if (document.activeElement != null) document.activeElement.blur();
168     if (XmlDoc == null) return "";
169     return XmlDoc.xml;
170 }
171 
172 function dot(v)
173 {
174     //先把非数字的都替换掉，除了数字和.
175     v.value = v.value.replace(/[^\d.]/g, "");
176     //必须保证第一个为数字而不是.
177     v.value = v.value.replace(/^\./g, "");
178     //保证只有出现一个.而没有多个.
179     //obj.value = obj.value.replace(/-{2,}/g,"");
180 
181     v.value = v.value.replace(/(\d*\.\d{2})(.*)/, "$1");
182 }
183 
184 function ReturnWindow()
185 {
186     window.open(document.all.Hidden3.value, '_self');
187 }

 

4、用Delphi实现Win32程序与HTML页面交互操作

 

代码
 1 unit Unit1;
 2 
 3 interface
 4 
 5 uses
 6   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
 7   Dialogs, ComCtrls, OleCtrls, SHDocVw, Menus, xmldom, XMLIntf, msxmldom,
 8   XMLDoc, StdCtrls, ExtCtrls, DB, DBClient, ImgList, MSHTML, Activex;
 9 
10 type
11   TForm1 = class(TForm)
12     XMLDocument1: TXMLDocument;
13     Panel2: TPanel;
14     WebBrowser1: TWebBrowser;
15     Panel3: TPanel;
16     BtnSave: TButton;
17     procedure FormShow(Sender: TObject);
18     procedure BtnSaveClick(Sender: TObject);
19     procedure FormDestroy(Sender: TObject);
20   private
21     { Private declarations }
22   public
23     { Public declarations }
24     RootTreeNode: TTreeNode;
25   end;
26 
27 var
28   Form1: TForm1;
29 
30 implementation
31 
32 {$R *.dfm}
33 
34 {加载页面}
35 procedure TForm1.FormShow(Sender: TObject);
36 var
37   starthtmpath: string;
38 begin
39   OleInitialize(nil);
40 
41   starthtmpath := ExtractFilePath(Application.ExeName) + 'AddWeiPainForm\AddWeiPianForm.htm';
42   //加载初始化页面
43   WebBrowser1.Navigate(starthtmpath);
44 end;
45 
46 {保存}
47 procedure TForm1.BtnSaveClick(Sender: TObject);
48 var
49   xmlstr, xmlpath, temppath: string;
50   fp: integer;
51 begin
52       try
53         temppath := ExtractFilePath(Application.ExeName) + 'temp.txt';
54         xmlstr := webbrowser1.OleObject.Document.parentWindow.SaveData();
55         xmlpath := extractfilepath(application.exename) + 'AddWeiPainForm\AddWeiPainForm.xml';
56         if xmlstr <>'' then
57         begin
58           if FileExists(temppath) then
59           begin
60             deletefile(temppath);
61           end;
62 
63           //创建临时文本文件
64           fp:=filecreate(temppath);
65           xmlstr:= StringReplace(xmlstr, '<?xml version="1.0"?>', '<?xml version="1.0" encoding="GB2312" ?>', [rfReplaceAll]);
66           filewrite(fp, xmlstr[1], length(xmlstr));
67           fileclose(fp);
68 
69           XMLDocument1 := TXMLDocument.Create(Self);
70           XMLDocument1.LoadFromFile(temppath);
71           XMLDocument1.Active := true;
72 
73           //保存基本信息
74           if FileExists(xmlPath) then
75           begin
76             DeleteFile(xmlPath);
77           end;
78           XMLDocument1.SaveToFile(xmlpath);
79 
80           XMLDocument1.Free();
81           XMLDocument1 := nil;
82           Application.MessageBox(Pchar('保存成功!'), '提示', MB_ICONINFORMATION);
83         end;
84       except
85         on e: Exception do
86           Application.MessageBox(Pchar('保存失败!' + e.Message), '提示', MB_ICONERROR);
87       end;
88 end;
89 
90 procedure TForm1.FormDestroy(Sender: TObject);
91 begin
92   OleUninitialize();
93 end;
94 
95 end.

 

 

5、写到这里就基本完成了，有兴趣的朋友可以到http://download.csdn.net/source/2236926下载全部源代码。