Meneroka Pustaka Tag Bentuk SpringMVC

1. Gambaran keseluruhan

Dalam artikel pertama siri ini kami memperkenalkan penggunaan perpustakaan tag bentuk dan cara mengikat data ke pengawal.

Dalam artikel ini, kami akan membahas pelbagai tag yang disediakan Spring MVC untuk membantu kami membuat dan mengesahkan borang .

2. Tag input

Kami akan bermula dengan teg input . Tag ini membuat tag input HTML menggunakan nilai terikat dan type = 'text' secara lalai:

Bermula dengan Spring 3.1 anda boleh menggunakan jenis khusus HTML5 lain, seperti e-mel, tarikh, dan lain-lain. Contohnya, jika kita ingin membuat medan e-mel, kita boleh menggunakan type = 'email':

Begitu juga, untuk membuat bidang tarikh, kita dapat menggunakan type = 'date' , yang akan menjadikan pemilih tarikh di banyak penyemak imbas serasi dengan HTML5:

3. Tag kata laluan

Tag ini menghasilkan tag input HTML dengan type = 'password' menggunakan nilai terikat. Input HTML ini menutupi nilai yang ditaip ke dalam bidang:

4. Tag teksarea

Teg ini menghasilkan teks HTML :

Kita dapat menentukan bilangan baris dan lajur dengan cara yang sama seperti teks HTML .

5. kotak dan kotak semak tag

The kotak semak tag menyebabkan HTML input tag dengan 'kotak' type = . Pustaka tag borang Spring MVC menyediakan pendekatan yang berbeza untuk tag kotak centang yang harus memenuhi semua keperluan kotak pilihan kami :

Contoh di atas menghasilkan kotak pilihan tunggal klasik , dengan nilai boolean . Sekiranya kita menetapkan nilai terikat ke benar , kotak centang ini akan dicentang secara lalai.

Contoh berikut menghasilkan pelbagai kotak pilihan . Dalam kes ini, nilai kotak centang dikodkan keras di dalam halaman JSP:

Bird watching:  Astronomy:  Snowboarding: 

Di sini, nilai terikat adalah jenis array atau java.util. Koleksi :

String[] hobbies;

Tujuan tag kotak centang digunakan untuk membuat beberapa kotak centang, di mana nilai kotak centang dihasilkan pada waktu berjalan:

Untuk menghasilkan nilai yang kami lalui dalam Array , List atau Map yang mengandungi pilihan yang tersedia di properti item . Kami dapat menginisialisasi nilai kami di dalam pengawal:

List favouriteLanguageItem = new ArrayList(); favouriteLanguageItem.add("Java"); favouriteLanguageItem.add("C++"); favouriteLanguageItem.add("Perl");

Biasanya harta terikat adalah koleksi sehingga dapat menyimpan beberapa nilai yang dipilih oleh pengguna:

List favouriteLanguage;

6. radiobutton dan radiobuttons Tag

Teg ini menghasilkan tag input HTML dengan type = 'radio':

Male:  Female: 

Corak penggunaan biasa akan melibatkan beberapa contoh tag dengan nilai yang berbeza terikat pada harta yang sama:

private String sex;

Sama seperti tag kotak pilihan , tag radiobutton memberikan banyak tag input HTML dengan type = 'radio' :

Dalam kes ini, kami mungkin ingin menyampaikan pilihan yang tersedia sebagai Array , List atau Peta yang berisi pilihan yang tersedia di properti item :

List jobItem = new ArrayList(); jobItem.add("Full time"); jobItem.add("Part time");

7. pilih Tag

Teg ini menjadikan elemen pilihan HTML :

Untuk menghasilkan nilai yang kami lalui dalam Array , List atau Map yang mengandungi pilihan yang tersedia di properti item . Sekali lagi, kita dapat menginisialisasi nilai kita di dalam pengawal:

Map countryItems = new LinkedHashMap(); countryItems.put("US", "United States"); countryItems.put("IT", "Italy"); countryItems.put("UK", "United Kingdom"); countryItems.put("FR", "France");

Tag pilih juga menyokong penggunaan tag pilihan dan pilihan bersarang .

Walaupun tag pilihan membuat satu pilihan HTML , tag pilihan membuat senarai tag pilihan HTML .

The pilihan tag mengambil masa Array , yang List atau Peta mengandungi pilihan yang ada dalam perkara harta, sama seperti pilih tag:

Apabila kita perlu memilih beberapa item sekaligus, kita dapat membuat kotak senarai berbilang. Untuk membuat senarai jenis ini, cukup tambahkan atribut multipel = "true" di tag pilih .

Di sini hartanah terikat adalah lokasi atau java.util.Collection :

List fruit;

8. Tag yang tersembunyi

Tag ini menghasilkan tag input HTML dengan type = 'hidden' menggunakan nilai terikat:

9. Tag Kesalahan

Mesej ralat lapangan dihasilkan oleh pengesah yang berkaitan dengan pengawal. Kita boleh menggunakan The Errors Tag untuk membuat mesej kesalahan bidang:

This will display errors for the field specified in the path property. The error messages are rendered within a span tag by default, with .errors appended to the path value as the id, and optionally a CSS class from the cssClass property, which can be used to style the output:

Name is required!

To enclose the error messages with a different element instead of the default span tag, we can specify the preferred element inside the element attribute:

This renders the error messages within a div element:

 Name is required! 

I n addition to having the capability to show errors for a specific input element , we can display the entire list of errors (regardless of field) for a given page. This is achieved by the use of the wildcard *:

9.1. The Validator

To display errors for a given field we need to define a validator:

public class PersonValidator implements Validator { @Override public boolean supports(Class clazz) { return Person.class.isAssignableFrom(clazz); } @Override public void validate(Object obj, Errors errors) { ValidationUtils.rejectIfEmptyOrWhitespace(errors, "name", "required.name"); } }

In this case, if the field name is empty, the validator returns the error message identified by required.name from the resource bundle.

The resource bundle is defined in the Spring XML configuration file as follows:

Or in a pure Java configuration style:

@Bean public MessageSource messageSource() { ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource(); messageSource.setBasenames("messages"); return messageSource; }

The error message is defined inside the messages.properties file:

required.name = Name is required!

To apply this validation, we need to include a reference to the validator in our controller and call the method validate in the controller method which is called when user submits the form:

@RequestMapping(value = "/addPerson", method = RequestMethod.POST) public String submit( @ModelAttribute("person") Person person, BindingResult result, ModelMap modelMap) { validator.validate(person, result); if (result.hasErrors()) { return "personForm"; } modelMap.addAttribute("person", person); return "personView"; }

9.2. JSR 303 Bean Validation

Starting from Spring 3, we can use JSR 303 (via the @Valid annotation) for bean validation. To do this we need a JSR303 validator framework on the classpath. We will use the Hibernate Validator (the reference implementation). Following is the dependency that we need to include in the POM:

 org.hibernate hibernate-validator 5.1.1.Final 

To make Spring MVC support JSR 303 validation via the @Valid annotation, we need to enable the following in our Spring configuration file:

Or use the corresponding annotation @EnableWebMvc in a Java configuration:

@EnableWebMvc @Configuration public class ClientWebConfigJava implements WebMvcConfigurer { // All web configuration will go here }

Next, we need to annotate the controller method that we want to validate with the @Valid annotation:

@RequestMapping(value = "/addPerson", method = RequestMethod.POST) public String submit( @Valid @ModelAttribute("person") Person person, BindingResult result, ModelMap modelMap) { if(result.hasErrors()) { return "personForm"; } modelMap.addAttribute("person", person); return "personView"; }

Now we can annotate the entity's property to validate it with Hibernate validator annotation:

@NotEmpty private String password;

By default, this annotation will display “may not be empty” if we leave the password input field empty.

We can override the default error message by creating a property in the resource bundle defined in the validator example. The key of the message follows the rule AnnotationName.entity.fieldname:

NotEmpty.person.password = Password is required!

10. Conclusion

In this tutorial we explored the various tags that Spring provides for working with forms.

Kami juga melihat tag untuk memaparkan kesalahan pengesahan dan konfigurasi yang diperlukan untuk memaparkan pesan kesalahan tersuai.

Semua contoh di atas boleh didapati dalam projek GitHub. Ini adalah projek berasaskan Eclipse, jadi mudah diimport dan dijalankan sebagaimana adanya.

Apabila projek dijalankan secara tempatan, contoh borang dapat diakses di:

// localhost: 8080 / spring-mvc-xml / orang