ASP中JavaScript处理复杂表单的生成与验证第1/3页
三、动态生成表单
生成表单时，程序按照definitons表中的各个输入域定义记录，依次生成相应的表单html代码和javascript代码。html代码中首先要生成的是文本标签：
以下是引用片段：
shtml = shtml & vbtab & "< tr >" & vbcrlf & vbtab & vbtab
shtml = shtml & "< td valign=" & chr(34) & "top" & chr(34)
shtml = shtml & " >" & vbcrlf & vbtab & vbtab & vbtab
shtml = shtml & "< b >" & rs.fields("label")
然后程序检查当前输入域是否必须输入。如果必须，则在标签文本之后加一个星号(表示该值必须输入)，同时对于必须输入的值，还要生成相应的javascript代码来验证它。对于单选按钮或选择列表，需进一步检查用户确实选择了某个选项;对于所有其他输入类型，只要检查输入值不为空即可。
紧接文本标签的是表单的输入元素，这些元素的html代码根据definitions表中指定的类型和属性生成。再接下来就是根据输入值要求生成执行客户端验证任务的javascript代码。对于本例，只有数字型的值需要进一步检查以保证用户的输入确实是数字，而且数字值在许可的最大值和最小值之间。生成上述代码之后，就可以结束一个表格行(也就是一个输入域)继续处理definitions表的下一个记录。一旦所有的数据库记录处理完毕，下一步就可以加入“提交”按钮和“清除”按钮的html代码。如果换个角度来看，程序在这里的任务就是根据数据库记录生成各个输入域，每个输入域占用一个表格行，每个表格行二个单元：第一个单元用来显示文本标签，第二个单元显示输入元素本身(代码见dform.asp)。
上述过程结束之后，表单的html代码和验证用javascript函数分别保存到了变量shtml和sjavascript中。在把这些内容写入页面之前，程序检查客户端是否要求执行javascript验证，如果不要求执行这类验证，则清除sjavascript变量：
if ivaltype = 0 or ivaltype = 2 then sjavascript = ""
在输出body标记之后，程序输出如下javascript函数：
以下是引用片段：
< script language="javascript" >
< !--
function validate(theform){
//客户端表单验证
< %=sjavascript% >
return true;
}
function checkradio(objradio){
//单选按钮中是否有某个值被选中
for(var n = 0; n < objradio.length; n++){
if(objradio[n].checked){
return true;
}
}
return false;
}
function checklist(objlist){
//是否已经在选择列表中选择了某个值
for(var n = 1; n < objlist.length; n++){
if(objlist.options[n].selected){
return true;
}
}
return false;
}
//-- >
< /script >
如果客户端不需要javascript验证，则validate函数只剩下一个“return true”语句。上面代码中的后面两个静态javascript函数(checkradio和checklist)用于验证单选按钮和下拉列表框，当这两种输入域需要验证时validate函数将调用它们。
现在可以开始把表单写入页面：
< form action="./dform.asp" method="post" name="myform" onsubmit="return validate(this)" >
在这里，只有当validate函数返回true时才执行表单提交操作。因此当客户端javascript验证功能关闭时，validate函数将自动返回true。
接下来要加入的是名为val的隐藏域。如前所述，该值指示表单的验证模式。
< input type="hidden" name="val" value="< %=ivaltype% >" >
当用户提交表单时，处理脚本将根据该值确定是否执行服务器端验证。
然后输出的是表格标记以及表格标题。标题保存在变量stitlelabel中，该值在脚本开始执行时初始化：
以下是引用片段：
< table border="0" >
< tr >
< td colspan="2" align="center" >
< h2 >< %=stitlelable% >< /h2 >
< /td >
< /tr >
2
如对本文有疑问，
点击进行留言回复！！
我要评论
网友评论