Javascript实例教程(9) 检验表单有效性
利用javascript表单的有效性检验
表单的有效性检验是javascript一个很有用的方面。它可以用于检查一个给定的表单以及发现表单中的任何问题,比如一个空白的输入框或者一个无效的E-mail(电子邮件)地址,然后它可以通知用户并且就不会将这些错误的表单传给服务器以节省时间。另外,除此以外,对表单标签的一些修改跟其它类型的脚本是类似的。以下的例子是一个简单的表单,如下面表单所示。你可以让名字的方框留空白或者输入一个电子邮件地址而没有@符号,即是输入错误的内容,看看javascript是进行表单的有效性检验的。
姓名:
电子邮箱:
结果你可以发现如果你忘记输入某一特定类型的数据到表单中去,它就会警告你并且取消提交给服务器。直到你键入了正确的信息,它才将表单发送给服务器。
本文来自织梦
下面我们来好好研究一下在javascript中是如何进行表单的有效性检验的。其中在表单有效性检验中最重要的代码是在表单标签处的一个时间处理器,这个时间处理器(onSubmit)必须返回真值的时候才提交表单。以下是详细的表单代码:
织梦好,好织梦
<FORM
内容来自dedecms
NAME = "theform" dedecms.com
ACTION = "mailto:" 织梦好,好织梦
METHOD = "POST" 织梦内容管理系统
ENCTYPE = "multipart/form-data" 织梦内容管理系统
onSubmit="return formCheck()"> dedecms.com
当Submit(提交)按钮被按下的时候,这个时间处理器就被触发,它接着执行函数formCheck(),这个函数是用于检查表单中是否没有错误了。 织梦内容管理系统
formCheck()函数的代码如下: 织梦好,好织梦
function formCheck()
{
if (document.theform.user_name.value == "") 织梦内容管理系统
{
内容来自dedecms
alert("Please put in a name."); 本文来自织梦
return false;
内容来自dedecms
} 织梦内容管理系统
if (document.theform.email.value.indexOf("@") == -1 || dedecms.com
document.theform.email.value == "")
内容来自dedecms
{ 织梦好,好织梦
alert("Please include a proper email address."); 织梦好,好织梦
return false;
本文来自织梦
} 本文来自织梦
} copyright dedecms
首先,formCheck()函数判断是否用户名字输入为空。如果为空,它也会警告用户并返回false值,这个表单也不会发送给服务器。接着formCheck()函数是判断是否Email地址输入包含一个@符号或者是空的。如果没有包含@符号或者是空的的任何一种情况,它就会警告用户并返回false值,这样这个表单就不会发送给服务器了。以上的任何一种错误都不会将表单发送给服务器的,直到正确填写完整个表单之后才将表单发送给服务器。
文章评论
共有位Admini5网友发表了评论 查看完整内容