- JavaScript典型应用与最佳实践
- 夏慧军编著
- 1099字
- 2020-08-26 19:13:59
1.1 认识JavaScript从表单验证开始
在Web应用中，我们几乎每天都会使用到各种各样的表单，表单是客户端浏览器与服务器端进行数据交换的最常用的一种方式。它将客户端的复杂数据以一种服务器端能够理解的方式传到服务器端程序进行处理。图1-1所示就是最常见的一个Web应用系统的登录表单。
图1-1 一个Web应用系统的登录表单
通常来说，要登录该系统，必须输入用户名与密码，然后再单击“登录”按钮进行登录。但是，在一些特殊情况下，可能用户名或者密码还没有输入，用户就直接单击了“登录”按钮，如果该系统是必须要求用户输入用户名与密码的话，很显然，将这种不完整的数据提交给登录处理程序是没有任何意义的。但是对于绝大多数应用来说，在这种情况下会出现如图1-2所示的错误提示，并且会阻止表的提交。
图1-2 登录表单的验证
这是怎样实现的呢？这就是利用JavaScript实现了对该登录表单的验证，并且在验证没有通过的情况下阻止了表单的提交。
大部分Web程序员第一次接触JavaScript都无一例外是表单验证：在对JavaScript一无所知的情况下，被JavaScript简单但灵活、方便的验证功能所吸引，从而开始学习JavaScript。基本上没有Web程序员能够抵挡住JavaScript的这种诱惑，因为在浏览器嵌入JavaScript之前的Web应用中，要实现这种类似的验证功能，是烦琐且资源消耗大的事情：必须将数据提交到服务器，由服务器对数据进行校验，然后服务器将校验结果发送给前端浏览器，从而通知用户输入错误。
在这个过程中，有数据的提交，有页面的切换，有服务器与网络资源的使用；而使用JavaScript，只需要在HTML中写下如代码1-1清单中所示的名为“checkLogin”的简单函数，就可以在没有数据提交、没有页面切换、没有服务器与网络资源的情况下完成相同的功能。
代码1-1清单 在1-1.html文件中
#001 <HTML>
#002 <HEAD>
#003 <TITLE>JavaScript Book--代码1-1</TITLE>
#004 </HEAD>
#005 <BODY>
#006 <TABLE width="245" border="0" valign="middle" align="center" cellpadding="3" cellspacing="1" bgcolor="#999999">
#007 <FORM METHOD="POST" ACTION="login.jsp" onsubmit="return checkLogin (this); ">
#008 <TR bgcolor="#9FBFDF">
#009 <TD colspan="2"><strong>欢迎使用！</strong></TD>
#010 </TR>
#011 <TR bgcolor="#E3F1F9">
#012 <TD nowrap>用户名：</TD>
#013 <TD><INPUT TYPE="text" NAME="userName" maxlength="20"></TD>
#014 </TR>
#015 <TR bgcolor="#E3F1F9">
#016 <TD nowrap>密码：</TD>
#017 <TD><INPUT TYPE="password" NAME="passWord" maxlength="20"></TD>
#018 </TR>
#019 <TR bgcolor="#E3F1F9">
#020 <TD colspan="2">
#021 <table width="100%" border="0" cellpadding="0" cellspacing="0">
#022 <tr>
#023 <td width="30%"> </td>
#024 <td width="*"><INPUT TYPE="submit"value="登录"> <INPUT TYPE=
"reset" value="清空"></td>
#025 </tr>
#026 </table>
#027 </TD>
#028 </TR>
#029 </FORM>
#030 </TABLE>
#031 <! --开始JavaScript脚本段-->
#032 <script language="JavaScript">
#033 //定义函数checkLogin，其传入参数为待验证表单的句柄
#034 function checkLogin(handle) {
#035 if(handle.userName.value=="") { //如果没有输入用户名
#036 alert("必须输入用户名！"); //提示用户必须输入用户名
#037 handle.userName.focus(); //将输入焦点放置在用户名输入框上
#038 return false; //阻止表单的提交
#039 }
#040 if(handle.passWord.value=="") { //如果没有输入密码
#041 alert("必须输入密码！"); //提示用户必须输入密码
#042 handle.passWord.focus(); //将输入焦点放置在密码输入框上
#043 return false; //阻止表单提交
#044 }
#045 return true; //表单可以进行提交
#046 }
#047 </script>
#048 </BODY>
#049 </HTML>
对于代码1-1更深入的了解是后面章节的内容，在此不做详细的讲解；我们只需要了解，使用了JavaScript的表单验证只用了几行简单的代码就解决了曾经如此复杂的问题，并且解决得如此完美。
就这样，JavaScript凭借着它简单但又近乎完美的表单验证解决方案吸引了每个Web程序员的视线，并最终成为他们开发实践工具箱中最常用的工具之一。
认识JavaScript，从验证开始，这是JavaScript成功的关键点，也是每个Web程序员和JavaScript结缘的起点。所以本书也从验证开始，逐步进入JavaScript的奇妙世界。