|
（2）用于客户端验证的JavaScript prodform.jsp页面位于<Tomcat安装目录>/webapps/ch12/example1/prodform.jsp，其中包含完成客户端验证的代码。下面将这个页面列出，并突出显示其中的JavaScript代码： <html> <head> <title>Product Information Entry Form</title> <script language="JavaScript"> function isDigitsOnly(inParam) { var chkExp = /^\d+$/; return (chkExp.test(inParam)); } function isTextOnly(inParam) { var chkExp = /^[a-z][a-z\d ]+$/i; return (chkExp.test(inParam)); } function validateForm() { var formValid = true; if (!isDigitsOnly(document.prodform.sku.value)) { document.getElementById("skuError").style.visibility = "visible"; formValid = false; } else document.getElementById("skuError").style.visibility = "hidden";
if (!isTextOnly(document.prodform.name.value)) { document.getElementById("nameError").style.visibility = "visible"; formValid = false; } else document.getElementById("nameError").style.visibility = "hidden";
if (!isTextOnly(document.prodform.desc.value)) { document.getElementById("descError").style.visibility = "visible"; formValid = false; } else document.getElementById("descError").style.visibility = "hidden";
if (!isDigitsOnly(document.prodform.price.value)) { document.getElementById("priceError").style.visibility = "visible"; formValid = false; } else document.getElementById("priceError").style.visibility = "hidden";
if (!formValid) alert("Some values you entered are invalid, please correct the entries marked in red." );
return formValid; } </script> <style> span.validateError { color: red; visibility: hidden; } </style> </head> <body> <h1>Enter Product Information</h1> <form name="prodform" action="index.jsp" method="post" onsubmit="return validateForm()"> <table border="0" > <tr> <td>SKU:</td> <td> <input name="sku" type="text" width="40"/> <span id="skuError" class="validateError"> <-- please enter digits only </span> </td> </tr>
<tr> <td>Name:</td> <td> <input name="name" type="text" width="40"/> <span id="nameError" class="validateError"> <-- please enter letters or numbers only, do not start with a number </span> </td> </tr> <tr> <td>Description:</td> <td> <input name="desc" type="text" width="40"/> <span id="descError" class="validateError"> <-- please enter letters or numbers only, do not start with a number </span> </td> </tr> <tr> <td>Price:</td> <td> <input name="price" type="text" width="40"/> <span id="priceError" class="validateError"> <-- please enter price in dollars only, do not enter cents </span> </td> </tr>
<tr> <td colspan="2"> <input type="submit" value="Add Product" /> <input type="hidden" name="action" value="prodsubmit"/> </td> </tr> </table> </form> </body> </html> 后面将对客户端验证代码做详细的分析。 这里使用了<script>标记将JavaScript代码嵌入到HTML页面中。由于诸如Microsoft Internet Explore等浏览器还支持VBScript，所以这里使用<script>标记的language属性来指定脚本语言是JavaScript： <script language="JavaScript"> 这个例子中只需要两个验证函数。第一个验证函数isDigitsOnly()用于验证收到的参数中只包含数字。在这种情况下不允许内嵌有字符或空格。isDigitsOnly() 函数实现如下： function isDigitsOnly(inParam) { var chkExp = /^\d+$/; return (chkExp.test(inParam)); } isDigitsOnly()函数使用了一个JavaScript正则表达式对象chkExp来完成验证。正则表达式的test()方法用于确定inParam 参数是否与指定的表达式匹配。如果匹配，test()方法会返回布尔值true；否则返回false。注意，这个表达式只与数字串匹配。 对JavaScript编程语言以及相关的正则表达式引擎的详细介绍已超出了本书的范围，感兴趣的读者可以参考Beginning JavaScript，第2版（ISBN 0-7645-5587-1）。 JavaScript正则表达式用斜杠 (/) 字符括起。表1-1解释了这个表达式中使用的符号。 表1-1 正则表达式中使用的符号
第二个验证函数是isTextOnly()，它检查收到的参数是否包含字母或空格。函数的参数必须以字母打头。 function isTextOnly(inParam) { var chkExp = /^[a-z][a-z\d ]+$/i; return (chkExp.test(inParam)); } isTextOnly()函数也使用了一个JavaScript正则表达式对象。表达式最后的 i 表示进行匹配时不用考虑大小写。i代表insensitive，即大小写无关。表1-2解释了表达式中用到的两个新的匹配符号。 表1-2 表达式中使用的符号
chkExp.test()把该正则表达式与其参数进行匹配，如匹配则返回true，否则返回false。 isTextOnly()下面是真正用于验证表单的函数validateForm()。它做的第一件事就是将一个名为formValid的JavaScript布尔变量值设置为true。这个变量会返回给调用者，当检测到验证错误时formValid会设置为false。 function validateForm() { var formValid = true; 在validateForm()函数中，接下来会对表单字段的值进行一系列检查。使用JavaScript时，可以通过浏览器提供的对象模型来访问表单字段。简单地说，每个HTML元素或表单元素都给定一个ID，可以用脚本语言来访问元素以修改其性质或属性。例如，在第一组验证代码中，可以通过表达式document.prodform.sku.value来访问sku字段的值。这个表达式会访问用户刚刚输入的sku值，并将值传递给isDigitsOnly()，以确保sku只包括数字： if (!isDigitsOnly(document.prodform.sku.value)) { document.getElementById("skuError").style.visibility = "visible"; formValid = false; } else document.getElementById("skuError").style.visibility = "hidden"; 需要注意，在此使用了文档对象模型（Document Object Model，DOM）提供的document. getElementById()方法（浏览器支持该方法）来修改skuError元素的CSS样式，skuError元素用于生成验证错误。 （3）使用隐藏的<span>标记来发现多个验证错误 如果检测到一个验证错误，可能有两种做法： q 立即要求用户修正错误。 q 记住这个错误，继续验证。 第一个实验采用了上述第二种做法，这样可以一次检测出多个错误，减少用户的麻烦。用户能一次修正多个错误，而不必每修改一个错误就提交，以至于反复看到弹出窗口。 验证错误消息直接显示在有错误的输入字段旁边，见图1-6。 这些错误消息实际上是表的一部分，不过我们可以使用了<span>标记中的CSS性质，将其设置为不可见。在validateError CSS类中定义了创建各个错误消息的样式。这个类作为一个<style> 元素嵌入到index.jsp中： ... <style> span.validateError { color: red; visibility: hidden; } </style> </head> <body> 这里将visibility 属性设置为hidden，使得错误消息最初是不可见的。 例如，sku字段验证的错误会预先生成如下： <tr> <td>SKU:</td> <td> <input name="sku" type="text" width="40"/> <span id="skuError" class="validateError"> <-- please enter digits only</span> </td> </tr> 由于这个错误消息指定为validateError 样式类，所以最初是不可见的。 经过验证后，如果出现一个错误，这个<span>标记的可见性则切换为可见。在验证过程中，以下突出显示的代码负责完成这个标记可见性的切换： if (!isDigitsOnly(document.prodform.sku.value)) { document.getElementById("skuError").style.visibility = "visible"; formValid = false; } else document.getElementById("skuError").style.visibility = "hidden"; 需要注意，对于有合法数据的字段，需要把可见性置为关闭（即hidden，不可见）。因为用户在再次提交表单之前可能并没有将所有错误都更正。 （4）表单提交之前的客户端验证 用户提交表单时，浏览器会向服务器发送数据。不过，如果指定了一个JavaScript onsubmit处理程序，这个处理程序会在实际提交之前调用。因此可以考虑把数据验证代码关联为一个处理程序。index.jsp中的以下内容调用了这个处理程序： <form name="prodform" action="index.jsp" method="post" onsubmit="return validateForm()"> 表单的action属性指定了要由index.jsp处理表单。应该记得，index.jsp实际上是一个前端控制器。它会把请求转发到procprod.jsp来处理，因为表单中action请求属性的值设置为prodsubmit。 请注意onsubmit属性中使用了JavaScript代码： return validateForm() 如果onsubmit处理程序返回true，表单数据会发送到服务器以便进一步处理；如果 onsubmit 处理程序返回false，会显示原来的表单，不会向服务器发送任何数据。 validateForm()方法使用自己的formValid 布尔变量来确定是否出现验证错误。这个变量会返回给调用者，说明只有当所有验证错误都得到更正时，表单才会向服务器发送数据。 （5）显示商品数据 表单数据最后提交回index.jsp，请求转发到位于<Tomcat安装目录>/webapps/ch12/ example1/procprod.jsp的procprod.jsp页面进行处理。下面列出procprod.jsp的内容： <%@ taglib prefix="c" uri="http://java./jsp/jstl/core" %> <html> <head> <title>Processing Product Information</title> </head> <body> <jsp:useBean id="localProd" class="com.wrox.begjsp.ch03.Product" /> <jsp:setProperty name="localProd" property="*" /> <h1>Product Information Received</h1> <table border="1"> <tr> <td>SKU:</td> <td><jsp:getProperty name="localProd" property="sku"/> </td> </tr>
<tr> <td>Name:</td> <td><jsp:getProperty name="localProd" property="name"/> </td> </tr> <tr> <td>Description:</td> <td><jsp:getProperty name="localProd" property="desc"/> </td> </tr> <tr> <td>Price:</td> <td> ${localProd.price}</td> </tr>
</table> </body> </html> 这个代码直接取自《JSP程序设计》第9章。它创建了com.wrox.begjsp.ch03.Product JavaBean的一个实例。根据用户输入的值设置这个JavaBean的属性。随后，再结合使用<jsp:getProperty>标准动作与EL表达式来生成这些属性值。 这个实验就介绍完了。尽管其中的index.jsp实现了客户端数据验证的JavaScript代码，这些代码不是使用JSP动态生成的。实际上，整个JSP更像是一个静态HTML页面。 |
|
|
来自： zjsxShenwx > 《网页制作技术》
