13.9. 使用Spring的表單標簽庫

從2.0版本開始，如果使用JSP和Spring Web MVC的話，Spring提供了一套支持數據綁定的標簽集合，用於處理表單元素。 每個標簽所支持的屬性集合和與其對應的HTML標簽相同，這就讓這些標簽看起來很熟悉，而且用起來很直觀。 由這些標簽庫生成的HTML頁面符合HTML 4.01/XHTML 1.0標准。

與其它表單/輸入標簽庫不同，Spring的表單標簽庫與Spring Web MVC集成在一起， 使標簽可以使用命令對象（command object）和你的控制器處理的參考數據（reference data）。 就像下面這些例子展示的一樣，表單標簽讓JSP更易於開發、閱讀和維護。

讓我們進入表單標簽的領域，並通過一個例子研究每個標簽如何使用。 當某些標簽需要更進一步的解釋時，我們已經把所生成的HTML片段也一起列了進來。

13.9.1. 配置

Spring的表單標簽庫包含在spring.jar中。 這個庫的描述符（descriptor)叫做spring-form.tld。

要使用這個庫中的標簽，在JSP頁面的開頭加入下面聲明：

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

在上面的聲明中，form就是為想要使用的這個庫中的標簽所確定的標簽命名前綴。

13.9.2. form標簽

這個標簽會生成一個HTML的“form”標簽，同時為內部標簽的綁定暴露了一個綁定路徑（binding path）。 它把命令對象（command object）放在PageContext中，這樣內部的標簽就可以訪問這個命令對象了。 這個庫中的其他標簽都是form標簽的嵌套標簽。

假設我們有一個叫做User的領域對象，它是一個JavaBean， 擁有諸如firstName和lastName這樣的屬性。 我們將把它當作返回form.jsp的表單控制器的表單支持對象（form backing object)。 下面是一個form.jsp可能的樣子的例子：

<form:form>
    <table>
        <tr>
            <td>First Name:</td>
            <td><form:input path="firstName" /></td>
        </tr>
        <tr>
            <td>Last Name:</td>
            <td><form:input path="lastName" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="Save Changes" />
            </td>
        </tr>
    </table>
</form:form>

上面firstName和lastName的值是從由頁面控制器放置在PageContext中的命令對象中得到的。 請繼續讀下去來看幾個關於如何使用form標簽的內部標簽的例子。

生成的HTML看起來就是一個標准的form：

<form method="POST">
    <table>
      <tr>
          <td>First Name:</td>
          <td><input name="firstName" type="text" value="Harry"/></td>
      </tr>
      <tr>
          <td>Last Name:</td>
          <td><input name="lastName" type="text" value="Potter"/></td>
      </tr>
      <tr>
          <td colspan="2">
            <input type="submit" value="Save Changes" />
          </td>
      </tr>
    </table>
</form>

上面的JSP有一個預設前提，就是表單支持對象（form backing）的變量名是“command”。 如果你將這個表單支持對象用其他名稱加以定義（這可算是一種最佳實踐），你就可以將這個命名變量綁定到表單上，如下例所示：

<form:form commandName="user">
    <table>
        <tr>
            <td>First Name:</td>
            <td><form:input path="firstName" /></td>
        </tr>
        <tr>
            <td>Last Name:</td>
            <td><form:input path="lastName" /></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="Save Changes" />
            </td>
        </tr>
    </table>
</form:form>

13.9.3. input標簽

這個標簽生成一個“text”類型的HTML“input”標簽。 關於這個標簽的示例，請見第 13.9.2 節 “form標簽”。

13.9.4. checkbox標簽

這個標簽生成一個“checkbox”類型的HTML“input”標簽。

讓我們假設我們的User有比如新聞訂閱和其他一組業余愛好這樣的偏好。 下面就是一個Preferences類的例子：

public class Preferences {

    private boolean receiveNewsletter;

    private String[] interests;

    private String favouriteWord;

    public boolean isReceiveNewsletter() {
        return receiveNewsletter;
    }

    public void setReceiveNewsletter(boolean receiveNewsletter) {
        this.receiveNewsletter = receiveNewsletter;
    }

    public String[] getInterests() {
        return interests;
    }

    public void setInterests(String[] interests) {
        this.interests = interests;
    }

    public String getFavouriteWord() {
        return favouriteWord;
    }

    public void setFavouriteWord(String favouriteWord) {
        this.favouriteWord = favouriteWord;
    }
}

form.jsp如下：

<form:form>
    <table>
        <tr>
            <td>Subscribe to newsletter?:</td>
            <%-- Approach 1: Property is of type java.lang.Boolean --%>
            <td><form:checkbox path="preferences.receiveNewsletter"/></td>
        </tr>

        <tr>
            <td>Interests:</td>
            <td>
                <%-- Approach 2: Property is of an array or of type java.util.Collection --%>
                Quidditch: <form:checkbox path="preferences.interests" value="Quidditch"/>
                Herbology: <form:checkbox path="preferences.interests" value="Herbology"/>
                Defence Against the Dark Arts: <form:checkbox path="preferences.interests"
                    value="Defence Against the Dark Arts"/>
            </td>
        </tr>
        <tr>
            <td>Favourite Word:</td>
            <td>
                <%-- Approach 3: Property is of type java.lang.Object --%>
                Magic: <form:checkbox path="preferences.favouriteWord" value="Magic"/>
            </td>
        </tr>
    </table>
</form:form>

有三種checkbox標簽的使用方法滿足你對checkbox的需求。

• 第一種用法：若綁定值是java.lang.Boolean類型，則值為true時，input(checkbox)就標記為選中。其value屬性對應於setValue(Object)值的屬性的解析值。

• 第二種用法：若綁定值是array或java.util.Collection類型，則當設定的setValue(Object)值出現在綁定的Collection中時，input(checkbox)就標記為選中。

• 第三種用法：若綁定值為其他類型，則當設定的setValue(Object)與其綁定值相等時，input(checkbox)才標記為選中。

注意，不管使用哪種方法，生成的HTML結構都是相同的。下面是包含一些checkbox的HTML片段：

<tr>
    <td>Interests:</td>
    <td>
        Quidditch: <input name="preferences.interests" type="checkbox" value="Quidditch"/>
        <input type="hidden" value="1" name="_preferences.interests"/>
        Herbology: <input name="preferences.interests" type="checkbox" value="Herbology"/>
        <input type="hidden" value="1" name="_preferences.interests"/>
        Defence Against the Dark Arts: <input name="preferences.interests" type="checkbox"
            value="Defence Against the Dark Arts"/>
        <input type="hidden" value="1" name="_preferences.interests"/>
    </td>
</tr>

也許沒有注意到的是在每個checkbox背后還隱藏了其他字段（field）。 當一個HTML頁面中的checkbox沒有被選中時，它的值不會在表單提交時作為HTTP請求參數的一部分發送到服務器端， 因此我們需要給這個HTML的奇怪動作想出一個變通方案，來讓Spring的表單數據綁定可以工作。 checkbox標簽遵循了Spring現有的慣例，就是對於每個checkbox都包含了一個下划線（"_"），再跟上一個隱藏參數。 這樣一來，就相當於告訴Spring“ 這個checkbox在表單中是可見的，並且希望表單數據將要被綁定到的對象能夠反映出任意的checkbox的狀態”。

13.9.5. checkboxes標簽

這個標簽生成多個“checkbox”類型的HTML“input”標簽。

這一節建立在上一節checkbox標簽的例子之上。 有時傾向於並不在JSP頁面中列出全部可能的業余愛好，而是想在運行時提供一個可用選項的清單，並把它傳遞給相應標簽。 這就是checkboxes標簽的目標。 傳入一個Array、List，或者Map， 並把可用選項包含在“items”屬性中。典型的情況是，這個綁定的屬性是一個集合，這樣它才能持有用戶選擇的多個值。 下面是使用了這個標簽的JSP的一個例子：

<form:form>
    <table>
        <tr>
            <td>Interests:</td>
            <td>
                <%-- Property is of an array or of type java.util.Collection --%>
                <form:checkboxes path="preferences.interests" items="${interestList}"/>
            </td>
        </tr>
    </table>
</form:form>

這個例子假定了“interestList”是一個List，作為模型屬性它包含了用於被選擇的字符串的值。 而在使用一個Map的情況下，map條目的鍵被用作值，map條目的值被用作顯示的文本標記。 也可以使用一個定制的對象，提供“itemValue”屬性存放值，“itemLabel”屬性存放文本標記。

13.9.6. radiobutton標簽

這個標簽生成一個“radio”類型的HTML“input”標簽。

一個典型用法是把多個標簽實例綁定到同一屬性上，但它們有不同的值。

<tr>
    <td>Sex:</td>
    <td>Male: <form:radiobutton path="sex" value="M"/> <br/>
        Female: <form:radiobutton path="sex" value="F"/> </td>
</tr>

13.9.7. radiobuttons標簽

這個標簽生成多個“radio”類型的HTML“input”標簽。

正像上面提到的checkboxes標簽，你可能希望傳入一個運行時的變量作為可用的選項。 這種用法下就需要使用radiobuttons標簽。 傳入一個Array、List，或者Map， 並把可用選項包含在“items”屬性中。在使用Map的情況下，map條目的鍵被用作值， map條目的值被用作顯示的文本標記。也可以使用一個定制的對象，提供“itemValue”屬性存放值，“itemLabel”屬性存放文本標記。

<tr>
    <td>Sex:</td>
    <td><form:radiobuttons path="sex" items="${sexOptions}"/></td>
</tr>

13.9.8. password標簽

這個標簽生成一個“password”類型的HTML“input”標簽，並賦以綁定的值。

<tr>
    <td>Password:</td>
    <td>
        <form:password path="password" />
    </td>
</tr>

請注意默認情況下，口令的值不會被顯示出來。 如果一定要顯示口令的值，就把“showPassword”屬性的值置為true。

<tr>
    <td>Password:</td>
    <td>
        <form:password path="password" value="^76525bvHGq" showPassword="true" />
    </td>
</tr>

13.9.9. select標簽

這個標簽生成一個HTML“select”元素。它支持被選中的選項的數據綁定， 也支持使用嵌套的option和options標簽。

我們假設有一個User擁有多項專長。

<tr>
    <td>Skills:</td>
    <td><form:select path="skills" items="${skills}"/></td>
</tr>

如果這個User的專長是草葯學，那么“Skills”這一行的HTML源代碼就如下所示：

<tr>
    <td>Skills:</td>
    <td><select name="skills" multiple="true">
        <option value="Potions">Potions</option>
        <option value="Herbology" selected="selected">Herbology</option>
        <option value="Quidditch">Quidditch</option></select>
    </td>
</tr>

13.9.10. option標簽

這個標簽生成一個HTML的“option”。根據綁定的值，它會恰當的設置“selected”屬性。

<tr>
    <td>House:</td>
    <td>
        <form:select path="house">
            <form:option value="Gryffindor"/>
            <form:option value="Hufflepuff"/>
            <form:option value="Ravenclaw"/>
            <form:option value="Slytherin"/>
        </form:select>
    </td>
</tr>

如果這個User的宿舍在Gryffindor（Gryffindor是哈利·波特在Hogwarts的宿舍——譯者注）， 那么“House”這一行的HTML源代碼就如下所示：

<tr>
    <td>House:</td>
    <td>
        <select name="house">
            <option value="Gryffindor" selected="selected">Gryffindor</option>
            <option value="Hufflepuff">Hufflepuff</option>
            <option value="Ravenclaw">Ravenclaw</option>
            <option value="Slytherin">Slytherin</option>
        </select>
    </td>
 </tr>

13.9.11. options標簽

這個標簽生成一個HTML的“option”標簽的列表。根據綁定的值，它會恰當的設置“selected”屬性。

<tr>
    <td>Country:</td>
    <td>
        <form:select path="country">
            <form:option value="-" label="--Please Select"/>
            <form:options items="${countryList}" itemValue="code" itemLabel="name"/>
        </form:select>
    </td>
</tr>

如果這個User生活在英國，那么“Country”這一行的HTML源代碼就如下所示：

<tr>
    <td>Country:</td>
    <td>
        <select name="country">
            <option value="-">--Please Select</option>
            <option value="AT">Austria</option>
            <option value="UK" selected="selected">United Kingdom</option>
            <option value="US">United States</option>
        </select>
    </td>
</tr>

上面的例子展示了結合使用option標簽和options標簽產生相同的標准HTML， 也讓你在JSP中顯式的指定一個值只用於顯示目的（在它所處的位置），例如例子中的默認字符串：“--Please Select”。

13.9.12. textarea標簽

這個標簽生成一個HTML的“textarea”。

<tr>
    <td>Notes:</td>
    <td><form:textarea path="notes" rows="3" cols="20" /></td>
    <td><form:errors path="notes" /></td>
</tr>

13.9.13. hidden標簽

這個標簽使用綁定的值生成類型為“hidden”的HTML“input”標簽。 在生成的HTML代碼中，input標簽的值和表單支持對象相應屬性的值保持一致。 如果要提交一個未綁定的值，就只能使用類型為“hidden”的HTML input標簽了。

<form:hidden path="house" />

如果我們選擇以隱藏形式提交“house”的值，HTML代碼將如下所示：

<input name="house" type="hidden" value="Gryffindor"/>

13.9.14. errors標簽

這個標簽通過一個HTML“span”標簽展現字段的錯誤。它提供了訪問由你的控制器或者與你的控制器關聯的任何驗證器產生的錯誤的途徑。

假設我們想要在表單提交時顯示所有與firstName和lastName字段有關的錯誤。 我們為User類的實例編寫了名為UserValidator的驗證器。

public class UserValidator implements Validator {

    public boolean supports(Class candidate) {
        return User.class.isAssignableFrom(candidate);
    }

    public void validate(Object obj, Errors errors) {
        ValidationUtils.rejectIfEmptyOrWhitespace(errors, "firstName", "required", "Field is required.");
        ValidationUtils.rejectIfEmptyOrWhitespace(errors, "lastName", "required", "Field is required.");
    }
}

form.jsp將如下所示：

<form:form>
    <table>
        <tr>
            <td>First Name:</td>
            <td><form:input path="firstName" /></td>
            <%-- Show errors for firstName field --%>
            <td><form:errors path="firstName" /></td>
        </tr>

        <tr>
            <td>Last Name:</td>
            <td><form:input path="lastName" /></td>
            <%-- Show errors for lastName field --%>
            <td><form:errors path="lastName"  /></td>
        </tr>
        <tr>
            <td colspan="3">
                <input type="submit" value="Save Changes" />
            </td>
        </tr>
    </table>
</form:form>

如果我們提交的表單的firstName和lastName字段均為空值， HTML頁面將如下所示：

<form method="POST">
    <table>
        <tr>
            <td>First Name:</td>
            <td><input name="firstName" type="text" value=""/></td>
            <%-- Associated errors to firstName field displayed --%>
            <td><span name="firstName.errors">Field is required.</span></td>
        </tr>

        <tr>
            <td>Last Name:</td>
            <td><input name="lastName" type="text" value=""/></td>
            <%-- Associated errors to lastName field displayed --%>
            <td><span name="lastName.errors">Field is required.</span></td>
        </tr>
        <tr>
            <td colspan="3">
                <input type="submit" value="Save Changes" />
            </td>
        </tr>
    </table>
</form>

如果我們想要顯示一個指定頁面上的所有錯誤清單，又該如何呢？ 下面的例子展示了errors標簽也支持一些基本的通配符功能。

• path="*"：顯示所有錯誤

• path="lastName*"：顯示所有與lastName字段有關的錯誤

下面的例子將會在頁面頭部顯示一個錯誤清單，后面則在每個字段旁邊顯示該字段特有的錯誤：

<form:form>
    <form:errors path="*" cssClass="errorBox" />
    <table>
        <tr>
            <td>First Name:</td>
            <td><form:input path="firstName" /></td>
            <td><form:errors path="firstName" /></td>
        </tr>
        <tr>
            <td>Last Name:</td>
            <td><form:input path="lastName" /></td>
            <td><form:errors path="lastName"  /></td>
        </tr>
        <tr>
            <td colspan="3">
                <input type="submit" value="Save Changes" />
            </td>
        </tr>
    </table>
</form:form>

HTML代碼將如下所示：

<form method="POST">
    <span name="*.errors" class="errorBox">Field is required.<br/>Field is required.</span>
    <table>
        <tr>
            <td>First Name:</td>
            <td><input name="firstName" type="text" value=""/></td>
            <td><span name="firstName.errors">Field is required.</span></td>
        </tr>

        <tr>
            <td>Last Name:</td>
            <td><input name="lastName" type="text" value=""/></td>
            <td><span name="lastName.errors">Field is required.</span></td>
        </tr>
        <tr>
            <td colspan="3">
                <input type="submit" value="Save Changes" />
            </td>
        </tr>
</form>