📄 ch07_02.htm
字号:
<?label 7.2. Forms?><html><head><title>Forms (CGI Programming with Perl)</title><link href="../style/style1.css" type="text/css" rel="stylesheet" /><meta name="DC.Creator" content="Scott Guelich, Gunther Birznieks and Shishir Gundavaram" /><meta scheme="MIME" content="text/xml" name="DC.Format" /><meta content="en-US" name="DC.Language" /><meta content="O'Reilly & Associates, Inc." name="DC.Publisher" /><meta scheme="ISBN" name="DC.Source" content="1565924193L" /><meta name="DC.Subject.Keyword" content="stuff" /><meta name="DC.Title" content="CGI Programming with Perl" /><meta content="Text.Monograph" name="DC.Type" /></head><body bgcolor="#ffffff"><img src="gifs/smbanner.gif" alt="Book Home" usemap="#banner-map" border="0" /><map name="banner-map"><area alt="CGI Programming with Perl" href="index.htm" coords="0,0,466,65" shape="rect" /><area alt="Search this book" href="jobjects/fsearch.htm" coords="467,0,514,18" shape="rect" /></map><div class="navbar"><table border="0" width="515"><tr><td width="172" valign="top" align="left"><a href="ch07_01.htm"><img src="../gifs/txtpreva.gif" alt="Previous" border="0" /></a></td><td width="171" valign="top" align="center"><a href="index.htm">CGI Programming with Perl</a></td><td width="172" valign="top" align="right"><a href="ch07_03.htm"><img src="../gifs/txtnexta.gif" alt="Next" border="0" /></a></td></tr></table></div><hr align="left" width="515" /><h2 class="sect1">7.2. Forms</h2><p>Probably the most popular use for JavaScript with web applications isto improve HTML <a name="INDEX-1528" />forms. Standard HTML formsaren't very smart. They simply accept input and pass it on tothe web server where all the processing must occur. With JavaScript,however, we can do much more on the client side. JavaScript canvalidate input before it is sent to the server. Forms can alsodynamically react to user input and update fields in order to provideimmediate feedback to the user; a dynamic form can often substitutefor multiple static forms.</p><p>The benefit JavaScript provides for the server is that it shifts somework that might otherwise be done on the server to the client, and itreduces the number of server requests. The benefit JavaScriptprovides to the user is that it provides immediate feedback without adelay while the browser fetches a new page.</p><a name="ch07-3-fm2xml" /><div class="sect2"><h3 class="sect2">7.2.1. Input Validation</h3><p>When you <a name="INDEX-1529" /> <a name="INDEX-1,530" /> <a name="INDEX-1,531" /> <a name="INDEX-1,532" />create an HTML form, you generallyexpect the user to fill it out in a particular way. There arenumerous types of restrictions a form may have. For example, some ofthe fields may only accept numbers while others may only acceptdates, some fields may only accept a certain range of entries, somefields may be required, and some combinations of fields may notpermitted. All of these examples must be handled by only two types ofchecks: the first is to validate each element user's input asthe data is entered; the second is to perform the validation when theform is submitted.</p><a name="ch07-4-fm2xml" /><div class="sect3"><h3 class="sect3">7.2.1.1. Validating elements</h3><p>Checking a <a name="INDEX-1533" /><a name="INDEX-1534" /><a name="INDEX-1535" />formelement when the user enters a value is most effective for validatingthe format or range of a particular element. For example, if a fieldonly accepts numbers, you can verify that the user did not enter anynon-numeric characters.</p><p>To perform this check, we use the<tt class="function">onChange</tt><a name="INDEX-1536" /> event handler. This handler supportsthe following form elements: <a name="INDEX-1537" /><a name="INDEX-1538" /> <a name="INDEX-1,539" />Text, TextArea, Password, FileUpload, and <a name="INDEX-1540" />Select. For each of these elements, we canregister an <tt class="function">onChange</tt> handler and assign it codeto execute when the element changes. We register it simply by addingit as an attribute to the <a name="INDEX-1541" />HTML tag that creates the element. Forexample:</p><blockquote><pre class="code"><INPUT TYPE="text" name="age" onChange="checkAge( this );"></pre></blockquote><p>This runs the function<tt class="function">checkAge</tt><a name="INDEX-1542" /> and passes it a reference toitself via <tt class="literal">this</tt>. <tt class="function">checkAge</tt>looks like this:</p><blockquote><pre class="code">function checkAge ( element ) { if ( element.value != parseInt( element.value ) || element.value < 1 || element.value > 150 ) { alert( "Please enter a number between 1 and 150 for age." ); element.focus( ); return false; } return true;}</pre></blockquote><p>This function checks that the age entered is an integer and between 1and 150 (sorry if you happen to be 152, but we have to draw the linesomewhere).</p><p>If <tt class="function">checkAge </tt>determines that the input isinvalid, it displays an alert asking the user to enter the valueagain (<a href="ch07_02.htm#ch07-86604">Figure 7-1</a>), and moves the cursor back tothe age field via <tt class="literal">element.focus()</tt><a name="INDEX-1543" /><a name="INDEX-1544" />. It then returns true or falsedepending on whether the check was successful or not. Thisisn't necessary, but it does help us if we later decide tostring multiple function calls together as you'll see later in<a href="ch07_02.htm#ch07-17670">Example 7-2</a>.</p><a name="ch07-86604" /><div class="figure"><img width="368" src="figs/cgi2.0701.gif" height="130" alt="Figure 7-1" /></div><h4 class="objtitle">Figure 7-1. JavaScript alert</h4><p>Note that we don't need to call a function to handle<tt class="function">onChange</tt>. We can assign multiple statementsdirectly to the<tt class="function">onChange</tt><a name="INDEX-1545" /> handler. However, it's often mucheasier to work with HTML documents when the JavaScript is kepttogether as much as possible, and functions help us to do this. Theyalso allow us to share code when we have multiple form elements thatrequire the same validation. For functions that you use often, youcan go a step further and place these in a JavaScript file that youcan include in multiple HTML files. We'll see an example ofthis in <a href="ch07_02.htm#ch07-45880">Figure 7-2</a>.</p></div><a name="ch07-5-fm2xml" /><div class="sect3"><h3 class="sect3">7.2.1.2. Validating submits</h3><p>The other way that we<a name="INDEX-1546" /><a name="INDEX-1547" /> <a name="INDEX-1,548" />can performdata validation is to do so just before the form is submitted. Thisis the best time to check whether required fields have been filled orto perform checks that involve dependencies between multipleelements. We perform this check with JavaScript's<tt class="function">onSubmit</tt><a name="INDEX-1549" /><a name="INDEX-1550" /><a name="INDEX-1551" /> handler.</p><p><em class="emphasis">onSubmit</em> works like the<tt class="function">onChange</tt> handler except that it is added as anattribute of the <FORM> tag:</p><blockquote><pre class="code"><FORM METHOD="POST" ACTION="/cgi/register.cgi" onSubmit="return checkForm(this);"></pre></blockquote><p>There's another difference you may notice. The<tt class="function">onSubmit</tt> handler returns the value of the codethat it calls. If the <tt class="function">onSubmit</tt> handler returnsfalse, it cancels the submission of the form after the handler codehas run. In any other case, the form submission continues. Returnvalues have no effect on the <tt class="function">onChange</tt> handler.</p><p>Here is the function that <a name="INDEX-1552" />checks our form:</p><blockquote><pre class="code">function checkForm ( form ) { if ( form["age"].value == "" ) { alert( "Please enter your age." ); return false; } return true;}</pre></blockquote><p>This example simply verifies that a value was entered for age.Remember, our <tt class="function">onChange</tt> handler is not enough todo this because it is only run when the value for age changes. If theuser never fills in a value for age, the<tt class="function">onChange</tt> handler will never be called. This iswhy we check for required values with <tt class="function">onSubmit</tt>.</p></div><a name="ch07-6-fm2xml" /><div class="sect3"><h3 class="sect3">7.2.1.3. Validation example</h3><p>Let's look at a <a name="INDEX-1553" /> <a name="INDEX-1,554" />completeexample. It seems that more and more web sites want users to registerand provide lots of personal information in order to use their website. We'll create a slightly exaggerated version of aregistration form (<a href="ch07_02.htm#ch07-45880">Figure 7-2</a>).</p><a name="ch07-45880" /><div class="figure"><img width="481" src="figs/cgi2.0702.gif" height="398" alt="Figure 7-2" /></div><h4 class="objtitle">Figure 7-2. Our sample user registration form</h4><p>Note that this form applies only to United States residents. Inpractice, Internet users come from around the world, so you must beflexible with your validation to accommodate the variousinternational formats for phone numbers, postal codes, etc. However,since the purpose of this example is to demonstrate validation,we'll restrict the formats to one set that can be easilyvalidated. The required formats for phone numbers and social securitynumbers are shown. In addition, the zip code is a five-digit postalcode.</p><p>The HTML is shown in <a href="ch07_02.htm#ch07-57105">Example 7-1</a>.</p><a name="ch07-57105" /><div class="example"><h4 class="objtitle">Example 7-1. input_validation.html </h4><a name="INDEX-1557" /><a name="INDEX-1,558" /><blockquote><pre class="code"><html> <head> <title>User Registration</title> <script src="/js-lib/formLib.js"></script> <script><!-- function validateForm ( form ) { requiredText = new Array( "name", "address", "city", "zip", "home_phone", "work_phone", "age", "social_security", "maiden_name" ); requiredSelect = new Array( "state", "education" ); requiredRadio = new Array( "gender" ); return requireValues ( form, requiredText ) && requireSelects( form, requiredSelect ) && requireRadios ( form, requiredRadio ) && checkProblems ( ); } // --> </script> </head> <body bgcolor="#ffffff"> <h2>User Registration Form</h2> <p>Hi, in order for you to access our site, we'd like first to get as much personal information as we can from you in order to sell to other companies. You don't mind, do you? Great! Then please fill this out as accurately as possible.</p> <p>Note this form is for U.S. residents only. Others should use the <a href="intl_registration.html">International Registration Form</a>.</p> <hr> <form method="POST" action="/cgi/register.cgi" onSubmit="return checkValues( this, requiredText ) && checkMenus"> <form method="GET" onSubmit="return validateForm( this );"> <table border=0> <tr><td> Name: </td><td> <input type="text" name="name" size="30" maxlength="30"> </td></tr> <tr><td> Address: </td><td> <input type="text" name="address" size="40" maxlength="50"> </td></tr> <tr><td> City: </td><td> <input type="text" name="city" size="20" maxlength="20"> </td></tr> <tr><td> State: </td><td> <select name="state" size="1"> <option value="">Please Choose a State</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> . . . <option value="WY">Wyoming</option> </select> </td></tr> <tr><td> Zip Code: </td><td> <input type="text" name="zip" size="5" maxlength="5" onChange="checkZip( this );"> </td></tr> <tr><td> Home Phone Number: </td><td> <input type="text" name="home_phone" size="12" maxlength="12" onChange="checkPhone( this );"> <i>(please use this format: 800-555-1212)</i> </td></tr> <tr><td> Work Phone Number: </td><td> <input type="text" name="work_phone" size="12" maxlength="12" onChange="checkPhone( this );"> <i>(please use this format: 800-555-1212)</i> </td></tr> <tr><td> Social Security Number (US residents only): </td><td> <input type="text" name="social_security" size="11" maxlength="11" onChange="checkSSN( this );"> <i>(please use this format: 123-45-6789)</i> </td></tr> <tr><td> Mother's Maiden Name: </td><td> <input type="text" name="maiden_name" size="20" maxlength="20"> </td></tr> <tr><td> Age: </td><td> <input type="text" name="age" size="3" maxlength="3" onChange="checkAge( this );"> </td></tr> <tr><td> Gender: </td><td> <input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female </td></tr> <tr><td> Highest Education: </td><td> <select name="education" size="1"> <option value="">Please Choose a Category</option> <option value="grade">Grade School</option> <option value="high">High School Graduate (or GED)</option> <option value="college">Some College</option> <option value="junior">Technical or Junior College Degree</option> <option value="bachelors">Four Year College Degree</option> <option value="graduate">Post Graduate Degree</option>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -