电脑报精华 · 1999 年 · 99wl127

用JavaScript编制留言簿程序

林凌·约 5,999 字

用JavaScript编制留言簿程序

也许你有一个很酷的主页，很希望与人分享。同时，你希望访问你主页的人能对你的主页提供一些意见和建议，或者你对某个主题感兴趣，而希望客人也许能给你一帮助，这就要用到留言簿。留言簿使得你能与每一个访问你主页的人交换信息。怎样编制留言簿程序呢？留言簿程序并不难，有很多选择可以实现，如CGI程序等等。本文介绍怎样用JavaScript编制留言簿程序，下面是一个完整的例子。
我们提供了一个表单，表单里有姓名、客人的电子邮件地址、使用的浏览器版本、国家名、意见和建议以及他所喜欢的站点等等。客人填写完这些字段后，按Submit按钮，信息就会通过电子邮件的形式寄给你。程序中提供了几个函数，大部分是用来对字段进行合法性检查的。下面我们对函数作一个简单的说明。 Reset() 按Reset按钮后对各字段的内容复位。
submitForms() 按submit按钮后对字段合法性检查后发送电子邮件。
isName() 对姓名字段进行合法性检查。
isEmail() 对电子邮件地址字段进行合法性检查。
isBrowser() 　对浏览器字段与自动检测的浏览器版本进行比较。
isCountry() 对国家字段进行合法性检查。
isComment() 　对意见字段进行合法性检查，不允许为空值。
isFavorite() 　对喜欢的站点字段进行合法性检查，不允许为空值。 程序中还提供了一些技巧，例如，如何判断浏览器的版本、字符串的操作等等。
结果是以电子邮件的形式提供给你的，里面有客人输入的各个字段。程序比较长，但不难看懂，下面是源代码：
<HTML>
<HEAD>
<TITLE>用JavaScript编制留言簿程序</TITLE>
<SCRIPT LANGUAGE=“JavaScript”>
<!-- Begin
//[email protected]是你自己的电子邮件地址
var emailAddress=“[email protected]”;
function toName()
{
var toNameval=document.forms［0］.elements［1］.value;
toNameval = “mailto:[email protected]?subject=Guest Book example”;
this.document.mail.action = toNameval;
}
function Reset() {
document.forms［0］.elements［0］.value = “”;
document.forms［0］.elements［1］.value = “”;
document.forms［0］.elements［2］.value =
navigator.appName + “ ” + navigator.appVersion;
document.forms［0］.elements［3］.value = “”;
document.forms［0］.elements［4］.value = “”;
document.forms［0］.elements［5］.value = “”;
document.forms［0］.elements［0］.focus();
}
function submitForms() {
if ( (isName() ) && (isEmail()) && (isBrowser())
&& (isCountry()) && (isComment()) && (isFavorite()))
if (confirm(“＼nYou're about to e-mail the form.＼n＼nClick on YES to submit.＼n＼nClick on NO to abort.”))
{
alert(“＼nYour submission will now be made to :
＼n＼n“+emailAddress+”＼n＼n＼nThank you!”);
return true;
}
else
{
alert(“＼nYou have chosen to abort the submission.”);
return false;
}
else
return false;
}
function isName() {
var str = document.forms［0］.elements［0］.value;
if (str == “”) {
alert(“＼nThe NAME field is blank.＼n＼nPlease enter your name.。”)
document.forms［0］.elements［0］.focus();
return false;
}
for (var i = 0; i <str.length; i++)
{
var ch = str.substring(i, i + 1);
if (((ch <“a” || “z” <ch) && (ch <“A” || “Z” <ch)) && ch != ' ')
{
alert(“＼nThe NAME field only accepts letters
& spaces.＼n＼nPlease re-enter your name.”);
document.forms［0］.elements［0］.select();
document.forms［0］.elements［0］.focus();
return false;
}
}
return true;
}
function isEmail()
{
emailAddress=document.forms［0］.elements［1］.value;
if (document.forms［0］.elements［1］.value == “”) 　　{
alert(“＼nThe E-MAIL field is blank.＼n＼nPlease enter your e-mail address.”)
document.forms［0］.elements［1］.focus();
return false;
}
if (document.forms［0］.elements［1］.value.indexOf ('@',0) == -1 ||document.forms［0］.elements［1］.value.indexOf ('.',0) == -1)
{
alert(“＼nThe E-MAIL field requires a ＼“@＼”
and a ＼“.＼”be used.＼n＼nPlease re-enter your e-mail address.”)
document.forms［0］.elements［1］.select();
document.forms［0］.elements［1］.focus();
return false;
}
else
{
toName();
return true;
}
}
function isBrowser()
{
if (document.forms［0］.elements［2］.value !
　　 = navigator.appName + “ ” + navigator.appVersion)
{
if (confirm(“＼nYou've changed your browser type.＼　　n＼nClick on OK to keep changes.＼n＼nClick on 　　　Cancel to restore detected browser.”))
return true
else
{
document.forms［0］.elements［2］.value =
navigator.appName + “ ” + navigator.appVersion;
return true;
}
}
else
return true;
}
function isCountry() {
var str = document.forms［0］.elements［3］.value;
if (str == “”) {
alert(“＼nThe COUNTRY field is blank.＼n＼nPlease enter your country.”)
document.forms［0］.elements［3］.focus();
return false;
}
for (var i = 0; i <str.length; i++) {
var ch = str.substring(i, i + 1);
if (((ch <“a” || “z” <ch) && (ch <“A” || “Z” <ch)) && ch != ' ')
{
alert(“＼nThe COUNTRY field only accepts letters & spaces.＼n＼nPlease re-enter your country.”);
document.forms［0］.elements［3］.select();
document.forms［0］.elements［3］.focus();
return false;
}
}
return true;
}
function isComment() {
if (document.forms［0］.elements［4］.value == “”) {
if (confirm(“＼nYou're about to submit without leaving a comment.＼n＼nClick on CANCEL to include a comment.＼n＼nClick on OK to continue without a comment.”))
return true
else
{
document.forms［0］.elements［4］.focus();
return false;
}
}
else
return true
}
function isFavorite() {
if (document.forms［0］.elements［5］.value == “”) {
if (confirm(“＼nYou're about to submit without
listing your favorite sites.＼n＼nClick on CANCEL
to include favorites.＼n＼nClick on OK to continue
without listing favorites.”))
return true
else
{
document.forms［0］.elements［5］.focus();
return false;
}
}
else
return true
}
// End -->
</SCRIPT>
</HEAD>

<BODY>
<CENTER>
<FORM ENCTYPE=“text/plain”
NAME=“mail” METHOD='GET'
ACTION='mailto:[email protected]'
onSubmit=“return submitForms()”>
<TABLE BORDER=0 WIDTH=400>
<TR>
<TD align=“center”> <FONT COLOR=800000>
<STRONG>Enter your name:</STRONG></FONT></TD>
<TD align=“center”> <FONT COLOR=800000>
<STRONG>Enter your e-mail address:< /STRONG>
</FONT></TD>
</TR>
<TR>
<TD align=“center”> <INPUT TYPE=“text”
NAME=“name” SIZE=30 MAXLENGTH=40 ></TD>
</TD>
<TD align=“center”> <INPUT TYPE=“text”
NAME=“email” SIZE=30 MAXLENGTH=40></TD>
</TR>
<TR>
<TD align=“center”> <FONT COLOR=800000>
<STRONG>Your browser </STRONG></FONT></TD>
<TD align=“center”> <FONT COLOR=800000>
<STRONG>Enter your country:</STRONG></FONT></TD>
</TR>
<TR>
<TD align=“center”> <INPUT TYPE=“text”
NAME=“browser” SIZE=30 MAXLENGTH=60></TD>
<TD align=“center”> <INPUT TYPE=“text”
NAME=“country” SIZE=30 MAXLENGTH=60>
</TD>
</TR>
</TABLE>
<CENTER>
<FONT COLOR=800000><STRONG>
Leave a comment or suggestion:</strong> </font><BR>
<TEXTAREA NAME=“comments”
ROWS=5 COLS=50 wrap=yes>Comments?
Suggestions?</TEXTAREA><P><P>
<FONT COLOR=800000><STRONG>
List your favorite sites:</STRONG></FONT><BR>
<TD align=“center”><TEXTAREA NAME=“favorites”
ROWS=5 COLS=50 wrap=yes>
Any sites I should take a look at?</TEXTAREA>
<P><P>
<INPUT TYPE=“submit” VALUE=“Submit”>
<center><INPUT TYPE=“reset” VALUE=“Reset”
onClick=“Reset()”>
</FORM>
</CENTER>
</BODY>
</HTML>
（林凌）