在Spring中使用Thymeleaf進行表單驗證的問題-有解無憂

我正在制作一個彈簧網路計算器，它接收名為“calculator”的模板中的輸入，將其發布到后端，對其進行驗證，如果輸入與模式匹配，它會計算結果并將其顯示在另一個名為的模板中“結果” 問題是，如果我的輸入與模式不匹配，它必須回傳錯誤訊息。為此，我使用了“th:if”。但相反，它會拋出 400 bad request 錯誤。這是我的代碼： 控制器 `

@Controller
public class CalculationController implements WebMvcConfigurer {
    @GetMapping("/")
    public String showForm(CalculatorForm calculatorForm) {

        //model.addAttribute("calculatorForm", new CalculatorForm());
        return "calculator";
    }
    @PostMapping("/")
    public String checkCalcValue(@Valid CalculatorForm calculatorForm, Model model, Errors errors) {
        if(errors.hasErrors()){
            return "calculator";
        }
            CalculationService service = new CalculationService();
            calculatorForm.setCalculationResult(service.calculate(calculatorForm.getCalculationValue()));
            System.out.println(calculatorForm.getCalculationValue());
            model.addAttribute("calculatorForm", calculatorForm);
            return "result";

    }
}

**Service**

public class CalculationService {
    public double calculate(String toCalculate) {
        ExpressionParser parser = new SpelExpressionParser();
        Expression exp = parser.parseExpression(toCalculate);
        Double result = exp.getValue(Double.class);
        return result;
    }
}

**Model**

public class CalculatorForm {

    @NotEmpty
    @Pattern(regexp="([0-9]|[\\- */]) ",message="only math expressions")
    private String calculationValue;
    private Double calculationResult;

    public String getCalculationValue() {
        return calculationValue;
    }
    public void setCalculationValue(String newCalculationValue){
        calculationValue = newCalculationValue;
    }
    public void setCalculationResult(Double newCalculationResult){
        calculationResult = newCalculationResult;
    }
    public Double getCalculationResult(){
        return calculationResult;
    }

}

**Calculator template**


<html xmlns:th="https://www.thymeleaf.org">
<head>
    <title>Your first Spring application</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p><a href="/calculator">Calculator</a></p>
<form action="#" th:action="@{/}" th:object="${calculatorForm}" method="post">
    <table>
        <tr>
            <td>Calculator:</td>
            <td><input value="" type="text" th:field="*{calculationValue}" name="calculationValue" id="calculationValue"/></td>
            <td th:if="${#fields.hasErrors('calculationValue')}" th:errors="*{calculationValue}">Calculation Error</td>
        </tr>
        <tr>
            <br/>
            <input type="button" onclick="input(this);" id="buttonOne" value="1"></input>
            <input type="button" onclick="input(this);" id="buttonTwo" value="2"></input>
            <input type="button" onclick="input(this);" id="buttonThree" value="3"></input>
            <br/>
            <input type="button" onclick="input(this);" id="buttonFour" value="4"></input>
            <input type="button" onclick="input(this);" id="buttonFive" value="5"></input>
            <input type="button" onclick="input(this);" id="buttonSix" value="6"></input>
            <br/>
            <input type="button" onclick="input(this);" id="buttonSeven" value="7"></input>
            <input type="button" onclick="input(this);" id="buttonEight" value="8"></input>
            <input type="button" onclick="input(this);" id="buttonNine" value="9"></input>
            <br/>
            <input type="button" onclick="input(this);" id="buttonZero" value="0"></input>
            <input type="button" onclick="input(this);" id="buttonPlus" value=" "></input>
            <input type="button" onclick="input(this);" id="buttonMinus" value="-"></input>
            <br/>
            <input type="button" onclick="input(this);" id="buttonMultiply" value="*"></input>
            <input type="button" onclick="input(this);" id="buttonDivide" value="/"></input>
            <input type="button" onclick="remove();" id="remove" value="<-"></input>
            <br/>
        </tr>
        <tr>
            <td><button type="submit">Submit</button></td>
        </tr>
        <input type="button" onclick="delAll();" id="delete" value="DEL"></input>
    </table>
</form>

<script>
    function input(button){
        let calculationValue = document.getElementById("calculationValue");
        calculationValue.value  = button.value;
    }
    function remove(){
        let calculationValue = document.getElementById("calculationValue");
        calculationValue.value = calculationValue.value.substring(0, calculationValue.value.length - 1);
    }
    function delAll(){
        let calculationValue = document.getElementById("calculationValue");
        calculationValue.value = "";
    }


</script>
</body>
</html>

**Result template**


<html xmlns:th="https://www.thymeleaf.org">
<head>
    <title>Your first Spring application</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p><a href="/calculator">Calculator</a></p>
<form action="#" th:action="@{/}" th:object="${calculatorForm}" method="post">
    <table>
        <tr>
            <td>Calculator:</td>
            <td><input value="" type="text" th:field="*{calculationValue}" name="calculationValue" id="calculationValue"/></td>
            <td th:if="${#fields.hasErrors('calculationValue')}" th:errors="*{calculationValue}">Calculation Error</td>
        </tr>
        <tr>
            <br/>
            <input type="button" onclick="input(this);" id="buttonOne" value="1"></input>
            <input type="button" onclick="input(this);" id="buttonTwo" value="2"></input>
            <input type="button" onclick="input(this);" id="buttonThree" value="3"></input>
            <br/>
            <input type="button" onclick="input(this);" id="buttonFour" value="4"></input>
            <input type="button" onclick="input(this);" id="buttonFive" value="5"></input>
            <input type="button" onclick="input(this);" id="buttonSix" value="6"></input>
            <br/>
            <input type="button" onclick="input(this);" id="buttonSeven" value="7"></input>
            <input type="button" onclick="input(this);" id="buttonEight" value="8"></input>
            <input type="button" onclick="input(this);" id="buttonNine" value="9"></input>
            <br/>
            <input type="button" onclick="input(this);" id="buttonZero" value="0"></input>
            <input type="button" onclick="input(this);" id="buttonPlus" value=" "></input>
            <input type="button" onclick="input(this);" id="buttonMinus" value="-"></input>
            <br/>
            <input type="button" onclick="input(this);" id="buttonMultiply" value="*"></input>
            <input type="button" onclick="input(this);" id="buttonDivide" value="/"></input>
            <input type="button" onclick="remove();" id="remove" value="<-"></input>
            <br/>
        </tr>
        <tr>
            <td><button type="submit">Submit</button></td>
        </tr>
        <input type="button" onclick="delAll();" id="delete" value="DEL"></input>
    </table>
</form>

<script>
    function input(button){
        let calculationValue = document.getElementById("calculationValue");
        calculationValue.value  = button.value;
    }
    function remove(){
        let calculationValue = document.getElementById("calculationValue");
        calculationValue.value = calculationValue.value.substring(0, calculationValue.value.length - 1);
    }
    function delAll(){
        let calculationValue = document.getElementById("calculationValue");
        calculationValue.value = "";
    }


</script>
</body>
</html>

我嘗試在控制器中使用斷點進行除錯，即“if(errors.hasErrors())”行。如果輸入與模式匹配，則回傳零錯誤并繼續編譯，但有趣的是，如果輸入與模式不匹配，它不會到達斷點——它有后映射注釋，這意味著有些東西會停止編譯并在到達必須回傳錯誤訊息的代碼部分之前引發 400 錯誤。

uj5u.com熱心網友回復：

從 Web MVC 參考檔案：

您必須在經過驗證的方法引數之后立即宣告一個Errors或BindingResult引數。

你把你的Model論點放在經過驗證的表單和Errors.

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/521172.html

標籤：爪哇春天验证弹簧MVC百里香叶

上一篇：帶有存盤在公共字串中的@Query的AndroidRoomDAOJava介面：這種做法是否像聽起來那么糟糕？

下一篇：嘗試驗證文本輸入，因此它只允許字母表中的字符作為輸入，但我遇到了問題。（Python）