站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题Javascript实例教程(9) 检验表单有效性

Javascript实例教程(9) 检验表单有效性

摘要: Javascript实例教程(9) 检验表单有效性
<textarea readonly style="border:none;font-family:Courier New;line-height:150%;width:760px;overflow-y:visible"> 表单的有效性检验是JavaScript一个很有用的方面。它可以用于检查一个给定的表单以及发现表单中的任何问题,比如一个空白的输入框或者一个无效的E-mail(电子邮件)地址,然后它可以通知用户并且就不会将这些错误的表单传给服务器以节省时间。另外,除此以外,对表单标签的一些修改跟其它类型的脚本是类似的。以下的例子是一个简单的表单,如下面表单所示。你可以让名字的方框留空白或者输入一个电子邮件地址而没有@符号,即是输入错误的内容,看看JavaScript是进行表单的有效性检验的。
function formCheck() { if (document.theform.user_name.value == "") { alert("Please put in a name."); return false; } if (document.theform.email.value.indexOf("@")==-1 || document.theform.email.value=="") { alert("Please include a proper email address."); return false; }} <form name="theform" method="post" action="mailto:" onSubmit="return formCheck();"> <table width="300" border="0" cellspacing="0" cellpadding="0" align="center"> <td colspan="2"></td> </tr> <td width="95">姓名:</td> <td width="205"> <input type="text" name="user_name"> </td> </tr> <td width="95">电子邮箱:</td> <td width="205"> <input type="text" name="email"> </td> </tr> <td colspan="2"> <input type="submit" name="Submit" value="Submit"> </td> </tr> </table> </form>
  结果你可以发现如果你忘记输入某一特定类型的数据到表单中去,它就会警告你并且取消提交给服务器。直到你键入了正确的信息,它才将表单发送给服务器。

  下面我们来好好研究一下在Javascript中是如何进行表单的有效性检验的。其中在表单有效性检验中最重要的代码是在表单标签处的一个时间处理器,这个时间处理器(onSubmit)必须返回真值的时候才提交表单。以下是详细的表单代码:

<form NAME = "theform"

ACTION = "mailto:"

METHOD = "POST"

ENCTYPE = "multipart/form-data"

onSubmit="return formCheck()">

当Submit(提交)按钮被按下的时候,这个时间处理器就被触发,它接着执行函数formCheck(),这个函数是用于检查表单中是否没有错误了。</td> </tr> </table></td> </tr>   
</td> </tr> </table> </textarea>
↑返回目录
前一篇: Javascript实例教程(10) 随机显示图片
后一篇: Javascript实例教程(8) 利用Javascript基于浏览器类型的重定向