程序及讲解如下:
<head>
<script language="JavaScript">
function validateForm() {
//定义函数
var ok=true
if (document.myForm.userName.value=="") {
ok=false
alert("姓名没有填写!")
//如果username(姓名文本框的名字)为空,将OK置为false,警告返回;
document.myForm.userName.focus()
//将光标聚焦在姓名框内,小特性,仅仅为了方便,与检测无关。
}
var foundAt = document.myForm.eMail.value.indexOf("@",0)
if (foundAt < 1 && ok) {
ok = false
alert ("电子邮件应该含 @ 字符!")
//如果不含@字符但姓名已经填写,将OK置为false,警告返回。
document.myForm.eMail.focus()
//将光标聚焦在邮箱框内。
}
if (ok==true) {
document.myForm.submit()
alert ("表单填写完毕,感谢!")
// location.href=../../history.back()
//如果全部检测通过,发出感谢信息并完成递交处理。通常这里可能需要返回上一步,可以加上上面的一句话。
}
}
</script>
</head>
<body>
<form name="myForm">
<p align="center">您的姓名:
<input type="text" name="userName" size="20">
电子邮件:
<input type="text" name="eMail" size="20"$# ;
<input type="button" value="Submit" onClick="validateForm()" name="button">
<input type="reset" value="Clear" name="reset">
</p>
</form>
</body>
紫色部分为说明,通常表单递交后需要交给CGI或ASP程序去处理,这里仅仅是演示。交给CGI/ASP程序处理是通过action="CGI-bin/submit.CGI"来进行的。当然你也可以通过电子邮件来处理,方法是:action="mailto:yourmail@mailserver.com" enctype="text/plain"
此外,注意form的名字是myForm前后要一致。各个表单项目的名字(name项)前后也要一致。
注意:<input type="button" value="Submit" onClick="validateForm()" name="button">
不是一般的submit按钮,而是普通的button,因为上面用到了document.myForm.submit()的方法。
本文作者: