动网论坛,站长建站首选,国内使用量最多的论坛软件 动网论坛官方技术讨论区 站长工具 申请属于您自己的免费论坛
首页 | 新闻资讯 | 网站运营 | 网络编程 | 数据库 | 服务器 | 网页设计 | 图像媒体 | 网络应用 | 搜索优化 | 资源下载 | 动网主机 | DVBOX
    本站内  互联网 ASP论坛  ASP.Net论坛  PHP论坛
  
   JavaScript → 阅读文章

 JavaScript检验表单有效性

作者来源: 
阅读 数 492 人次 , 2006-3-29 3:47:00 


  表单的有效性检验是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 == ""
 本文Tags组网  
 收藏本文  打印本文  论坛讨论  关闭窗口
· 上一篇:JavaScript创建\"后退\"按钮
· 下一篇:利用JavaScript基于浏览器类型的重定向
· JavaScript通用库
· JavaScript隐藏Script代码
· 什么是JavaScript及其特点
· JavaScript+CSS实现层的平移及动态显示
· JavaScript实例 一个事件激活多个函数


关于本站 | 联系我们 | 业务合作 | 客户案例 | 诚聘英才 | 广告合作 | 收藏本站
海口动网先锋网络科技有限公司版权所有
Copyright © 2000 - 2006 Cndw.Com
中华人民共和国电信与信息服务业务经营许可证编号 琼 ICP 020077