开发学院软件开发 Java Go-ForIt 记事：eXtreme DragonSlayers 专题报告，... 阅读

Go-ForIt 记事：eXtreme DragonSlayers 专题报告，第 6 部分: 有价值，却又让人烦恼的技术 — 数据确认和验证

　2009-11-06 00:00:00　来源：WEB开发网　　　

核心提示： 当上面的脚本被添加到文档中时，检查 firstName 域，Go-ForIt 记事：eXtreme DragonSlayers 专题报告，第 6 部分: 有价值，却又让人烦恼的技术 — 数据确认和验证(7)，当用户按下 Submit 按钮时运行 checkForm 例程，这个例程检查表单中的一些

当上面的脚本被添加到文档中时，检查 firstName 域。当用户按下 Submit 按钮时运行 checkForm 例程。这个例程检查表单中的一些域并整理错误，还通过返回“false” 防止表单被提交。提交表单后消息或警告框中立即列出所有的错误，并使用域的 focus() 方法让用户返回到第一个要纠正错误不正确的域。

瞬时与批处理确认相结合

这种方法在用户单击或用 tab 键跳出域时实时检查每个录入域。每个域都有一个 onChange 事件处理程序来触发有相关确认例程的函数。下面的示例将批处理和瞬时确认方法结合在一起。

在 GoFor-It.com 注册页面中我们不使用实时确认，但下面的示例用于检查用户 Name 域是否已完成。

<HTML>　 <HEAD>　 <TITLE>Simplified　Registration　Form</TITLE>　 <SCRIPT　language="JavaScript">　 //--Check　required　fields　for　no　value　 function　reqdField(field)　{　　var　rfield　=　field.value　　if　(rfield=="")　{　　alert("This　is　a　required　field,　you　need　to　fill　in　a　value.")　　field.focus()　　field.select()　　return　false　　}　　return　true　 }　 //--Batch　form　field　validation　 function　checkForm(form)　{　 //--VARIABLES　THAT　WILL　BE　RESET　DYNAMICALLY　AS　NEEDED　　var　errorIndex　=　0;　　var　errorMessage　=　'';　　var　firstBadField　=　'';　 //--CHECK　THE　FIRST　NAME　FIELD　FOR　NO　ENTRY　DATA　 //alert('Checking　First　Name　field.');　 if(document.form1.firstName.value=="")　{　　errorIndex++;　　errorMessage　+=　errorIndex　+　　　　'　.　First　Name　is　a　required　field.\n';　　if　(firstBadField==''){　　firstBadField　=　form.firstName;　　}　　}　 //--IF　ERROR　MESSAGE　IS　NOT　EQUAL　TO　NADA,　THEN　THERE　MUST　BE　ERRORS,　 //SO　DISPLAY　THE　ERROR　MESSAGE　AND　PLACE　FOCUS　ON　THE　FIRST　BAD　FIELD　 if　(errorMessage　!=　'')　{　　alert('Sorry,　the　form　was　not　submitted　due　to　the　following　problems:　　　　　\n\n'+　errorMessage);　　if　(firstBadField　!=　'')　{　　firstBadField.focus();　　}　　//alert('value　of　hidden　date　field:　'　+　form.date.value);　　return　false;　　}　　 }　 </SCRIPT>　 </HEAD>　 <BODY>　 <P>Part　of　a　Simplified　Registration　Form<BR>　 </P>　 <FORM　action="/goforit/RegistrationServlet"　name="form1"　　　　>　 <BR>　 Title<SELECT　size="1"　name="title">　 <OPTION　SELECTED></OPTION>　 <OPTION>Mr.</OPTION>　 <OPTION>Mrs.</OPTION>　 <OPTION>Ms.</OPTION>　 <OPTION>Miss</OPTION>　 </SELECT><BR>　 Name　 <INPUT　maxlength="25"　name="firstName"　size="20"　type="text"　　　value=""　onBlur="reqdField(this)"><BR>　 Surname　 <INPUT　maxlength="30"　name="lastName"　size="20"　type="text"　　　value=""　><BR>　 I　am　seeking　help　with　my　errands:　 <INPUT　type="checkbox"　name="userTypeCustomer"　　　value="customer"></INPUT><BR>　 I　want　to　do　errands　for　others:　 <INPUT　type="checkbox"　name="userTypePA"　　　value="personalAssistant"/></INPUT><BR>　 </SELECT><BR>　 <BR>　 <INPUT　type="reset"　name="ResetButton"　value="Reset">　 <INPUT　type="submit"　name="SubmitButton"　value="Submit"><BR>　 </FORM>　 </BODY>　 </HTML>　