用 JavaScript 编制留言簿程序

用 JavaScript 编制留言簿程序 ( 2001-03-07 11:48:53 )
chz.myrice.com

　　也许你有一个很酷的主页，很希望与人分享。同时，你希望访问你主页的人能对你的主页提供一些意见和建议，或者你对某个主题感兴趣，而希望客人也许能给你一帮助，这就要用到留言簿。留言簿使得你能与每一个访问你主页的人交换信息。怎样编制留言簿程序呢？留言簿程序并不难，有很多选择可以实现，如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 〉