SPRING MVC AJAX-FORM VALIDATION

最新推荐文章于 2021-06-29 15:58:49 发布

aqh518

最新推荐文章于 2021-06-29 15:58:49 发布

阅读量680

点赞数

分类专栏： java web

java web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用框架去開發軟體，最大的好處就是節省許多開發流程，所以許多人容易被框架所框住，在做專案開發的時候有些頁面具有提交表單的功能，為了安全性往往在要做表單的格式驗證，有些人會習慣使用Javascript Framework在前端網頁把驗證做掉(例如: jQuery Validation)，但是我們應該在後端再做一層驗證，讓我們的頁面更安全更好用一些。

通常，許多採用Spring MVC的開發者會選擇使用Spring的Form Tag Libary搭配Hibernate依照JSR303規範實作好的Bean Validation在後端用Tag的方式許規範每一個欄位所要驗證的格式。
然而，對於許多人而言他們已經習慣運用Javascript & Ajax 技術去處理他們網頁前端的各種功能，再利用JSON格式作為前端的Browser與後端的溝通，有些時候因為專案的需求，API文件幾乎也都是訂定JSON格式的回傳。因此，有許多人希望能夠在Spring MVC中達到 Ajax-Form Validation。

以下我們將用簡單的小範例完成基本的 Ajax-Form Validation。
在此我們將以一個簡單User表單驗證做範例，使用者在提交的時候若不符合格式就會有警示，阻擋表單提交。
使用的相關資源或技術:
1.Spring Framework RELEASE 3.2.7
2.Hibernate Validator 4.1.0 FINAL
3.JDK 1.7
4.Eclipse kepler 4.3

首先如果你手邊有個基本可以運作的Spring MVC網站，那你可以在你的servlet-context中配置如下設定

記得要新增一個messages.properties檔放在src底下，然後可以在裡面設定要顯示的錯誤訊息，我們後面的步驟會提到

<!-- messages.properties -->
<beans:bean id="messageSource" class="org.springframework.context.support.ResourceBundleMessageSource" p:basename="messages" />

有的人可能比較適合這種寫法，原則上只是schema的不同而已，基本上都差不多

<!-- messages.properties -->
<bean id="messageSource" class="org.springframework.context.support.ResourceBundleMessageSource" p:basename="messages" />

首先我們制作一個User Bean，其中Bean裡面的Validation Rule可以參考

http://hibernate.org/validator/
每個驗證要呈現給使用者的錯誤訊息我們可以設定在messages.properties裡面，然後命名規則如下:

NotEmpty.user.name = Name is required !
這句的意思依序是非空驗證,對user bean驗證,驗證name這個欄位

製作一個User Bean

 
   package hwhsu.idv.tw.model;
 
import javax.validation.constraints.Size;
 
import org.hibernate.validator.constraints.Email;
import org.hibernate.validator.constraints.NotEmpty;
 
public class User {
 
private int id;
 
 @Size(min = 2, max = 4)
 @NotEmpty
 String name;
 
 @Email
 @NotEmpty
 String email;
 
public User() {
 
}
 
public User(String name, String email, long phone) {
 
this.name = name;
 this.email = email;
 }
 
public String getName() {
 return name;
 }
 
public void setName(String name) {
 this.name = name;
 }
 
public String getEmail() {
 return email;
 }
 
public void setEmail(String email) {
 this.email = email;
 }
 
public int getId() {
 return id;
 }
 
public void setId(int id) {
 this.id = id;
 }
 
@Override
    public String toString() {
        return "User [id=" + id + ", name=" + name + ", email=" + email
                + "]";
    }
} 
   
 
   
 
  

有了User Bean之後，我們需要一個FormValidationController控制我們頁面form.jsp(表單)

 
   package hwhsu.idv.tw.controller;
 
import hwhsu.idv.tw.model.User;
 
import java.beans.PropertyEditorSupport;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import javax.servlet.http.HttpServletRequest;
import javax.validation.Valid;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.MessageSource;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.ServletRequestDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
 
/*
 * Form Validation Ajax-Based
 * 撰寫作者:hwhsu
 * 撰寫日期:2014/02/16 
 */
 
@Controller
@RequestMapping("/user")
public class FormValidationController {
     
    // 取得 messages.properties
    @Autowired
    private MessageSource messages;
     
    public MessageSource getMessages() {
        return messages;
    }
     
    public void setMessages(MessageSource messages) {
        this.messages = messages;
    }
     
    // 取得form.jsp頁面，並且置入一個user bean等待使用者輸入資料
    @RequestMapping(method = RequestMethod.GET)
    public String displayUserForm(ModelMap model) {
  
        model.addAttribute("user", new User());
        return "form";
    }
     
    /* 當使用者確定送出資料後，觸發user bean的validation
     * @ResponseBody代表著接收傳來的Json字串，並轉成Object
     * @Valid代表啓動user bean validation
     */
    @RequestMapping(value = "/submituser",method=RequestMethod.POST )
    public @ResponseBody UserJsonResponse submitUser(@Valid User user,BindingResult bindingResult){
         
        System.out.println("Submited User Data : \n"+user);
         
        //設定回應訊息物件
        UserJsonResponse userJsonResponse=new UserJsonResponse();
         
        //如果user bean有驗證錯誤
        if(bindingResult.hasErrors()){
             
            //作為訊息錯誤對照表
            Map<String ,String> errors=new HashMap<String, String>();
            //訊息錯誤清單
            List<FieldError> fieldErrors = bindingResult.getFieldErrors();
             
            for (FieldError fieldError : fieldErrors) {
                 
                //將所有錯誤訊息依序存入陣列resolveMessageCodes
                String[] resolveMessageCodes = bindingResult.resolveMessageCodes(fieldError.getCode());
 
                //錯誤欄位相關訊息回傳,此為第一欄位。
                String string = resolveMessageCodes[0];
                System.out.println("resolveMessageCodes : "+string);
                 
                //將驗證錯訊息對照存入errors這個map底下，並印出該欄位給使用者的錯誤提示
                String message = messages.getMessage(string+"."+fieldError.getField(), new Object[]{fieldError.getRejectedValue()}, null);
                System.out.println("Meassage : "+message);
                errors.put(fieldError.getField(), message)  ;
            }
            userJsonResponse.setErrorsMap(errors);
            userJsonResponse.setUser(user);
            userJsonResponse.setStatus("ERROR");
        }else{
            userJsonResponse.setStatus("SUCCESS");
             
        }
        return userJsonResponse;
    }
     
    //實作內部類別UserJsonResponse作為Json訊息處理物件
    class UserJsonResponse {
         
        private String status;
        private Map<String, String> errorsMap;
        private User user;
         
        //取得錯誤狀態
        public String getStatus() {
            return status;
        }
         
        //設定錯誤狀態
        public void setStatus(String status) {
            this.status = status;
        }
         
        //取得錯誤狀態列表
        public Map<String,String> getErrorsMap() {
            return errorsMap;
        }
         
        //設定錯誤訊息列表
        public void setErrorsMap(Map<String,String> errorsMap) {
            this.errorsMap = errorsMap;
        }
         
        //取得User Bean 
        public User getUser() {
            return user;
        }
         
        //設定User Bean
        public void setUser(User user) {
            this.user = user;
        }
    }
     
     
     @InitBinder
     protected void initBinder(HttpServletRequest request, ServletRequestDataBinder binder) throws Exception {
         binder.registerCustomEditor(long.class, new PropertyEditorSupport() {
            @Override
            public void setAsText(String text) {
                if (text.trim().length() == 0) {
                    text = "0";
                }
                long ch = Long.parseLong(text);
                setValue(ch);
            }
        });
     }
} 
   
 
   
 
  

最後，實作一個頁面form.jsp，然後我們這裡使用jquery ajax去做post動作

 
   <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#userform").submit(function(e){
            jQuery(".formFieldError").remove();
            jQuery.ajax({
                    url: jQuery(this).attr("action"),  
                    context: document.body,
                    type: 'post',
                    //取得form表單裡的欄位值
                    data:jQuery(this).serialize()
                }).done(function(res) {
                    //如果後端回傳ERROR表示某個欄位驗證有誤
                    if(res.status==="ERROR"){
                        for(var key in res.errorsMap){
                            var err="<span class=\"formFieldError\" id=\""+key+"Id\">"+res.errorsMap[key]+"</span>";
                            jQuery("[name^='"+key+"']").after(err);
                        }
                    }else{                      
                        jQuery("#msg").html("Form submitted");
                        //若成功送出，把表單的欄位內容清空
                        document.forms[0].reset() ;
                        alert("成功") ; 
                    }
                }).fail(function(data){
                    //與web service連線溝通出現問題
                    jQuery("#msg").html("<span class=\"formFieldError\">Server failed to process request</span>");
                });
            return false;
        });
    });
</script>
<style type="text/css">
.formFieldError{
color:red;
}
</style>
</head>
    <body>
     
        <form id="userform" action="submituser" method="post"  >
            Name  :<input type="text" name="name"/><br/>
            Email  :<input type="text" name="email"/><br/>
            <input type="submit"/>
        </form>
        <div id="msg"></div>
     
    </body>
</html> 
   
 
   
 
  

大功告成～

收工～

aqh518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SPRING MVC AJAX-FORM VALIDATION

使用框架去開發軟體，最大的好處就是節省許多開發流程，所以許多人容易被框架所框住，在做專案開發的時候有些頁面具有提交表單的功能，為了安全性往往在要做表單的格式驗證，有些人會習慣使用Javascript Framework在前端網頁把驗證做掉(例如: jQuery Validation)，但是我們應該在後端再做一層驗證，讓我們的頁面更安全更好用一些。通常，許多採用Spring MVC的開發者會
复制链接

扫一扫