46-问题

10.11.1　问题

你希望验证一个表单。开始，你应该建立一些基本的CSS。对这一增强来说，真正重要的唯一样式是 div.errorMessage 选择器的 display:none 声明和 div.showErrorMessage 选择器的 display:block 声明。其余的样式只是对外观的美化：

<style type="text/css" title="text/css">
　　 div.question {
　　　　　padding: 1em;
　　 }
　　 div.errorMessage {
　　　　　display: none;
　　 }
　　 div.showErrorMessage {
　　　　　display: block;
　　　　　color: #f00;
　　　　　font-weight: bold;
　　　　　font-style: italic;
　　 }
　　 label.error {
　　　　　color: #f00;
　　　　　font-style: italic;
　　 }
</style>

下面的HTML片段是构造表单的一个例子。 <div class="question> 元素纯粹用于布局，对验证代码并不重要。每个 <label> 元素的 for 属性将其与 id 属性相同的表单元素关联。这是标准的HTML，之所以强调它，是因为JavaScript也使用这个属性（反向）寻找给定表单元素的正确 <label> 。类似地，你会注意到错误消息的 id 属性为 errorMessage_ 加上相关表单元素的 name 属性。这种结构看上去似乎多余，但是复选框和单选按钮按照 name 属性分组，每一个组只能有一条错误消息：

<form action="process.php">
<!-- TEXT -->
<div class="question">
　　 <label for="t">Username</label>
　　 <input id="t" name="user" type="text" class="required" />
　　 <div id="errorMessage_user" class="errorMessage">Please enter your username.</div>
　　 </div>
<!-- PASSWORD -->
<div class="question">
　　 <label for="p">Password</label>
　　 <input id="p" name="pass" type="password" class="required" />
　　 <div id="errorMessage_pass" class="errorMessage">Please enter your password.</div>
</div>
<!-- SELECT ONE -->
<div class="question">
<label for="so">Favorite Color</label>
　　 <select id="so" name="color" class="required">
　　 <option value="">Select a Color</option>
　　　　　<option value="ff0000">Red</option>
　　　　　<option value="00ff00">Green</option>
　　　　　<option value="0000ff">Blue</option>
　　 </select>
　　 <div id="errorMessage_color" class="errorMessage">Please select your favorite
color.</div>
</div>
<!-- SELECT MULTIPLE -->
<div class="question">
　　 <label for="sm">Favorite Foods</label>
　　 <select id="sm" size="3" name="foods" multiple="multiple" class="required">
　　　　　<option value="pizza">Pizza</option>
　　　　　<option value="burger">Burger</option>
　　　　　<option value="salad">Salad</option>
　　 </select>
　　 <div id="errorMessage_foods" class="errorMessage">Please choose your favorite
foods.</div>
</div>
<!-- RADIO BUTTONS -->
<div class="question">
　　 <span>Writing Hand:</span>
　　 <input id="r1" type="radio" name="hand" class="required"/>
　　 <label for="r1">Left</label>
　　 <input id="r2" type="radio" name="hand" class="required" />
　　 <label for="r2">Right</label>
　　 <div id="errorMessage_hand" class="errorMessage">Please select what hand you
write with.</div>
</div>
<!-- TEXTAREA -->
<div class="question">
　　 <label for="tt">Comments</label>
　　 <textarea id="tt" name="comments" class="required"></textarea>
　　 <div id="errorMessage_comments" class="errorMessage">Please tell us what you
think.</div>
</div>
<!-- CHECKBOX -->
<div class="question">
　　 <input id="c" type="checkbox" name="legal" class="required" />
　　 <label for="c">I agree with the terms and conditions</label>
　　 <div id="errorMessage_legal" class="errorMessage">Please check the box!</div>
</div>
<input type="submit" value="Continue" />
</form>