The Web Wizard’s Guide To JavaScript peopleWeb向导指南JavaScript的人.uncw.pptVIP

The Web Wizard’s Guide To JavaScript Chapter 3 Working with Forms Chapter Objectives To learn how to use form validation to examine the text entered by your visitors To understand the principles of working with text fields To learn how to detect and change the format of information in a text field To learn how to work with radio buttons, check boxes, and selection menus To create simple self-grading tests Form Validation HTML forms contain fields, select menus, radio buttons, and check boxes Form validation procedures: Check the data the visitor enters on the form Reminds the visitor to enter missing data Reformats the visitor’s data as needed Text Fields: Bad or Missing Data The input tag - single line of text The textarea tag - multiple lines of text Always include name and value attributes The onsubmit event handler calls the validate() function The validate() function checks for bad or missing data. If the function returns false then the form is not submitted. Text Fields: Reformatting Data U.S. telephone numbers require specific format (555) 333-4444 A visitor types a phone number into a text field then types the tab key. An onchange event handler calls the formatNumber() function. The formatNumber() function finds the first ten numbers in the text field and adds the necessary parentheses and spaces. The reformatted number is displayed in the field. Validating Text Fields To validate a text field, you first determine whether a value has been entered. For example, to determine whether the visitor neglected to enter information into a required field, you may test the expression (!document.survey.visitor.value). If that expression is true then the visitor failed to enter required information into the visitor field.You can also check to make sure the information is in the correct format in terms of numbers and punctuation. Radio Buttons Radio buttons are used for questions like gender which have a limited number of possible responses. The getRadioValue() function