JavaScript 表单必填项检查

<script type="text/javascript"> /* Set to false if you don't want the error messages */ var err = true; /* Set to true if you want modal javascript dialogues instead of DOM messages */ var modal = false; /* Browser detect, need's a little work */ var ie; if (navigator.appVersion.indexOf("MSIE")!=-1) { ie = true; } else { ie = false; } /** * Loops through the page forms and add's onSubmit events to forms * with the class name 'validate'. **/ var addOnSubmitEvent = function() { var frms = document.getElementsByTagName('form'); for (var i=0; i < radiogroup.length ++j) if(radiogroup[j].checked) break; if(!itemchecked) checkbox elems="document.getElementsByTagName("input");" j JavaScript 表单必填项检查

Date: 2006-07-02
Version: 1.21

该脚本支持所有的表单输入项。

设置必填检查项仅仅需要在各元素增加class 属性值reg。用户如果没有输入必填项，脚本提供两种方式进行提醒。

一种是采用插入DOM节点，显示错误消息。

一种是直接弹出对话框，显示错误消息。

脚本还有一个特性：允许根据某个表单输入项的值来设置其他表单项的必填项检查状态。

例子：

表单介绍了该脚本的一些基本功能。必填项验证脚本支持表单的所有输入项。（注：*表示必填项）

姓: *

名:

电子邮箱: *

年龄: *
选择年龄-1011-1718-2526-4546-

性别: *

男 女

兴趣: *
FishingHuntingProgramingGamingReading

喜爱: *

CNN.com Stylegala CSSDesign.se

附件: *

评论: *

说明文档

下面简要说明该脚本的使用方法。

首先要表单支持必填项检查功能

表单必填项检查必须将 class 属性值设置为validate。

<form id="frm1" class="validate" method="get" action="form-validation.html">

命名输入表单项

这个脚本会用到表单的 name 和 id 属性，所有这个两个属性都必须设置。这个两个属性的值必须是一致的，除非输入表单项是单选钮或者是复选框。请看下面的例子：

<input type="checkbox" name="favs" id="fav1" class="req" value="value1" /> <label for="fav1">CNN.com</label>

<input type="checkbox" name="favs" id="fav2" class="req" value="value2" /> <label for="fav2">Stylegala</label>

如果是输入框， name 和 id 属性值必须一致，例如：

<label for="fname">First name</label>
<input type="text" name="fname" id="fname" class="req" />

设置输入表单项必填检查

设置输入表单项必填只需要增加class 属性值为 req。

class="req"

如果你想该表单项拥有其他的一些样式特性，可以直接用空格来分隔不同的样式类即可。如下：

class="textinput req"

标签

脚本要求所有的输入项使用标签，因为错误提示信息需要根据标签中的文本显示。

标签的 for 属性必须和输入项的 id 属性值一致。例如：

<label for="fname">First name</label>
<input type="text" name="fname" id="fname" class="req" />

当使用单选钮或者复选框，你必须把标签的 for 属性值设置成和输入项的 name 属性一致。例如：

<label for="favs">Favorites</label>

<input type="checkbox" name="favs" id="fav1" class="req" value="value1" /> <label for="fav1">CNN.com</label>

<input type="checkbox" name="favs" id="fav2" class="req" value="value2" /> <label for="fav2">Stylegala</label>

将脚本包含在网页中

在head部分设置将脚本包含，可以直接粘贴下面的代码。

<script type="text/javascript" src="form-validation.js"></script>

有条件的必填项检查

如果你想根据其他输入项的值来设置输入项的必填检查。你可以创建一个 .js 文件。例如创建一个my-conditions.js 包含在网页中。

<script type="text/javascript" src="my-conditions.js"></script>

并且在文件中编辑以下代码：

/* File: my-conditions.js */
conds.push(Array(subject name, subject value, target name, boolean));

或者你可以直接在网页的head部分编辑代码，像这样：

<script type="text/javascript">
conds.push(Array('gender','man','hobbies', false));
conds.push(Array('gender','man','income', false));
</script>

上面的例子中如果你选择了性别为女时，要求你必须选择你的爱好。只需加入以下的代码：

conds.push(Array('gender','man','hobbies', false));

gender 是性别单选钮 name 属性值 (有两个选择，一个是男和一个是女)。 man 是一个单选钮 value 属性值，hobbies 是一个列表选择框的 name 属性值。这里我们想根据性别的选择来决定爱好项是否应该为必填。

最后一个参数 false，表示是否是否设置爱好输入项为必填或者不做必填要求，如果条件为true的时候。

错误提示

脚本支持两种方式提示错误信息。你可以使用对话框或者使用插入节点显示信息的方式，你也可以只高亮显示需要填写的输入项。

你可以指定需要那种方式的错误提示，直接在脚本form-validation.js的开头编辑 err 和 modal 的值。

浏览器支持

• Mozilla Firefox 1.5.0.1 (OS X)
• Safari 2.0.3 (OS X)
• Camino 1.0 (OS X)
• Opera 9.0 (OS X)
• Mozilla Firefox 1.5 (Windows)
• Internet Explorer 6.0 (Windows)

原文：http://www.tornstrand.com/scripts/javascript-form-validation/