JavaScript编制留言簿程序代码
作者：
也许你有一个很酷的主页，很希望与人分享。同时，你希望访问你主页的人能对你的主页提供一些意见和建议，或者你对某个主题感兴趣，而希望客人也许能给你一帮助，这就要用到留言簿。留言簿使得你能与每一个访问你主页的人交换信息。
怎样编制留言簿程序呢？留言簿程序并不难，有很多选择可以实现，如CGI程序等等。本文介绍怎样用JavaScript编制留言簿程序，下面是一个完整的例子。
----我们提供了一个表单，表单里有姓名、客人的电子邮件地址、使用的浏览器版本、国家名、意见和建议和所喜欢的站点等等。客人填写完这些字段后，按Submit按钮，信息就会通过电子邮件的形式寄给你。程序中提供了几个函数，大部分是用来对字段进行合法性检查的。下面我们对函数作一个简单的说明。
----函数Reset()按Reset按钮后对各字段的内容复位。
----函数submitForms()按submit按钮后对字段合法性检查后发送电子邮件。
----函数isName()对姓名字段进行合法性检查。
----函数isEmail()对电子邮件地址字段进行合法性检查。
----函数isBrowser()对浏览器字段与自动检测的浏览器版本进行比较。
----函数isCountry()对国家字段进行合法性检查。
----函数isComment()对意见字段进行合法性检查，不允许为空值。
----函数isFavorite()对喜欢的站点字段进行合法性检查，不允许为空值。
----程序中还提供了一些技巧，例如，如何判断浏览器的版本，字符串的操作等等。
----结果是以电子邮件的形式提供给你的，里面有客人输入的各个字段。程序比较长，但不难看懂，下面是源代码：
<HTML>
<HEAD>
<TITLE> 用JavaScript 编 制 留 言 簿 程 序</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
//Someone@abc.com 是 你 自 己 的 电 子 邮 件 地 址
var emailAddress="Someone@abc.com";
function toName()
{
var toNameval=document.forms[0].elements[1].value;
toNameval = "mailto:Someone@abc.com?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.nnClick
on YES to submit.nnClick on NO to abort."))
{
alert("nYour submission will now be made to :
nn"+emailAddress+"nnnThank 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.nnPlease 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.nnPlease 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.
nnPlease 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.nnPlease 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.nnClick on OK to keep changes.
nnClick 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.nnPlease 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.nnPlease 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.nnClick
on CANCEL to include a comment.nnClick
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.nnClick on CANCEL
to include favorites.nnClick 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:Someone@abc.com'
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>
----我们提供了一个表单，表单里有姓名、客人的电子邮件地址、使用的浏览器版本、国家名、意见和建议和所喜欢的站点等等。客人填写完这些字段后，按Submit按钮，信息就会通过电子邮件的形式寄给你。程序中提供了几个函数，大部分是用来对字段进行合法性检查的。下面我们对函数作一个简单的说明。
----函数Reset()按Reset按钮后对各字段的内容复位。
----函数submitForms()按submit按钮后对字段合法性检查后发送电子邮件。
----函数isName()对姓名字段进行合法性检查。
----函数isEmail()对电子邮件地址字段进行合法性检查。
----函数isBrowser()对浏览器字段与自动检测的浏览器版本进行比较。
----函数isCountry()对国家字段进行合法性检查。
----函数isComment()对意见字段进行合法性检查，不允许为空值。
----函数isFavorite()对喜欢的站点字段进行合法性检查，不允许为空值。
----程序中还提供了一些技巧，例如，如何判断浏览器的版本，字符串的操作等等。
----结果是以电子邮件的形式提供给你的，里面有客人输入的各个字段。程序比较长，但不难看懂，下面是源代码：
<HTML>
<HEAD>
<TITLE> 用JavaScript 编 制 留 言 簿 程 序</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
//Someone@abc.com 是 你 自 己 的 电 子 邮 件 地 址
var emailAddress="Someone@abc.com";
function toName()
{
var toNameval=document.forms[0].elements[1].value;
toNameval = "mailto:Someone@abc.com?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.nnClick
on YES to submit.nnClick on NO to abort."))
{
alert("nYour submission will now be made to :
nn"+emailAddress+"nnnThank 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.nnPlease 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.nnPlease 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.
nnPlease 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.nnPlease 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.nnClick on OK to keep changes.
nnClick 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.nnPlease 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.nnPlease 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.nnClick
on CANCEL to include a comment.nnClick
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.nnClick on CANCEL
to include favorites.nnClick 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:Someone@abc.com'
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>