使用简单的 JavaScript 验证特定字段
1.50/5 (3投票s)
2005 年 7 月 25 日
1分钟阅读
25437
208
使用简单的 JavaScript 验证 HTML 按钮中的特定字段，然后提交有效数据或显示警报。
引言
这是一个使用 JavaScript 编写的简单 HTML 表单验证器，目的是验证不同按钮中的特定字段，然后显示包含错误信息的警报，或者直接提交表单。其特殊之处在于按钮中的指定内容。
HTML 代码
这是一个包含表单、三个字段和两个按钮的 HTML 代码，第一个按钮只发送姓名和姓氏，而另一个按钮需要填写所有字段才能发送信息。
<body>
<form id="f" method="post" name="form1">
<DIV align="center">
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1" align="center">
<TR>
<TD>Name:</TD>
<TD><INPUT id="txtName" type="text" name="Your Name" ></TD>
</TR>
<TR>
<TD>Last Name:</TD>
<TD><INPUT id="txtLastName" type="text" name="Your Last Name" ></TD>
</TR>
<TR>
<TD>Other:</TD>
<TD><INPUT id="txtOther" type="text" name="Other Data"></TD>
</TR>
<TR>
<TD></TD>
<TD>
<INPUT id="Button2" type="button" value="Send Without Other" name="Button1" ></TD>
</TR>
</TABLE>
<BR>
<INPUT id="Button1" type="button" value="Send All"
name="Button1" >
</DIV>
</form>
<P></P>
</body>
JavaScript
脚本中的第一个函数是获取没有表单引用或其他容器引用的元素。
它的工作方式如下：
//without the first scriptvar temp = document.myform.textboxname;
temp.value;
var temp2 = document.myotherform.textbox2name;
temp2.value;
//with the first scriptvar temp getTrueElement(textboxname);
temp.value;
var temp2 getTrueElement(textbox2name);
temp2.value;
<script language="javascript">
function getTrueElement(q){
var truth;
if(document.all)
truth = eval("document.all."+q);
if(!document.all && document.getElementById)
truth = document.getElementById(q);
return truth;
}脚本中的第二个函数是验证字段数组。
只需提供一个包含用特定字符分隔的字段 ID 的字符串，在本例中我使用“/”，然后创建数组并设置错误标题。
function validateForm(arrControles)
{
if (arrControles != "")
{
var aa = new Array();
aa = arrControles.split('/');
var texto='Please fill:\n';
创建一个布尔值来设置表单的有效或无效值，并读取数组中所有 ID 的控件，检查字段名称是否存在，并使用 .value.length 属性检查每个控件是否已填写。
如果任何字段为空（长度为 0），则获取控件名称以在自定义错误中显示，并将布尔变量设置为 false。
最后，读取布尔变量，如果为 false，则显示带有自定义错误字符串的警报，如果为 true，则提交表单。
var boolRes = true;
for(var i=0;i<aa.length;i++)
{
var objTemp=getTrueElement(aa[i]);
if(!objTemp.name) alert('Error: no name exist '+objTemp.id);
if (objTemp.value.length>0){}else{texto+=objTemp.name;texto+='\n'; boolRes=false;}
}
if (boolRes==false){ alert(texto); return false;
} else {
alert('Form Submited');
document.forms["0"].submit();
}
} else {
alert('Form Submited');
document.forms["0"].submit();
}
}
</script>
使用脚本
要使用此脚本，只需将按钮的点击操作设置为函数名称，并传递包含要验证的字段 ID 的字符串，这些 ID 之间用特定字符分隔即可。
例如：
<form id="f" method="post" name="form1">
<DIV align="center">
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1" align="center">
<TR>
<TD>Name:</TD>
<TD><INPUT id="txtName" type="text" name="Your Name" ></TD>
</TR>
<TR>
<TD>Last Name:</TD>
<TD><INPUT id="txtLastName" type="text" name="Your Last Name" ></TD>
</TR>
<TR>
<TD>Other:</TD>
<TD><INPUT id="txtOther" type="text" name="Other Data"></TD>
</TR>
<TR>
<TD></TD>
<TD>
<INPUT id="Button2" type="button" value="Send Without Other" name="Button1" onclick="validateForm('txtName/txtLastName');"></TD>
</TR>
</TABLE>
<BR>
<INPUT id="Button1" onclick="validateForm('txtName/txtLastName/txtOther');" type="button" value="Send All"
name="Button1" >
</DIV>
</form>
希望这段代码对您有所帮助。
Ing. Marcelo Lujan