Javascript实例教程(8) 检验表单有效性_Web开发_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

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

作者：闵涛文章来源：闵涛的学习笔记点击数：555 更新时间：2009/4/23 11:26:27

　　表单的有效性检验是JavaScript一个很有用的方面。它可以用于检查一个给定的表单以及发现表单中的任何问题，比如一个空白的输入框或者一个无效的E-mail（电子邮件）地址，然后它可以通知用户并且就不会将这些错误的表单传给服务器以节省时间。另外，除此以外，对表单标签的一些修改跟其它类型的脚本是类似的。以下的例子是一个简单的表单，如下面表单所示。你可以让名字的方框留空白或者输入一个电子邮件地址而没有@符号，即是输入错误的内容，看看JavaScript是进行表单的有效性检验的。

　　结果你可以发现如果你忘记输入某一特定类型的数据到表单中去，它就会警告你并且取消提交给服务器。直到你键入了正确的信息，它才将表单发送给服务器。

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

<FORM

NAME = "theform"

ACTION = "mailto:"

METHOD = "POST"

ENCTYPE = "multipart/form-data"

onSubmit="return formCheck()">

当Submit（提交）按钮被按下的时候，这个时间处理器就被触发，它接着执行函数formCheck()，这个函数是用于检查表单中是否没有错误了。
formCheck()函数的代码如下：

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;

}

}

　　首先，formCheck()函数判断是否用户名字输入为空。如果为空，它也会警告用户并返回false值，这个表单也不会发送给服务器。接着formCheck()函数是判断是否Email地址输入包含一个@符号或者是空的。如果没有包含@符号或者是空的的任何一种情况，它就会警告用户并返回false值，这样这个表单就不会发送给服务器了。以上的任何一种错误都不会将表单发送给服务器的，直到正确填写完整个表单之后才将表单发送给服务器。

　　以上程序的原理实质是获得表单中各元素的值“value”，然后加上是否等于“＝＝”某些设定的内容，或者说本身固有的内容（比如EMAIL的＠）。

　　按此你可以加以扩充它的功能，比如完善Email的检验功能，加上判断“＠”后的邮件服务器的地址和一点“.”。如下图:

　　也可以增加对发信内容进行校验。增加的代码是获得发信内容文本框的值：
document.theform.发信内容的文本框名.value == ""

点击此处去测试效果页，并获得源代码。

没有相关教程

教程录入：mintao 责任编辑：mintao

上一篇教程： Javascript实例教程(9) 随机显示图片

下一篇教程： Javascript实例教程(7) 利用Javascript基于浏览器类型的重定向

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……