Question

如何在thymeleaf和spring boot中提交表单，并在javascript中进行一些客户端验证，如果验证失败的表单没有提交，否则请求发送到控制器？

在下面的代码中，如何检查第一个数字是否大于第二个数字在javascript中，则仅将表单提交给Controller，否则发生验证错误，并且表单未提交。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Calculation </title>
    </head>
<body>
<h1>Subtraction</h1>
  <form action="#" id="myform" th:action="@{/result}" th:object="${subtraction}" method="POST">
   <table>
   <tr>
   
       <td/>First Number :</td>
	   <td>
   <input type="text" id="firstno" th:field="*{firstnumber}" />     
   </td>	   
  </tr>
   
   <tr><td>Second Number :</td>
     <td>
      <input type="text" id="secondno" th:field="*{secondnumber}" />   
     </td>
	   	</tr>	    
	    	<tr></tr>
	    	<tr><td colspan="2">
	              <input type="submit" value="Submit"/> 
	              <input type="reset" th:value="Reset"/>
	            </td>
	        </tr>
	    
</table>  
 </form>
 
 
 <script th:inline="javascript">

   var a=/*[[${subtraction.firstnumber}]]*/;
 var b=/*[[${subtraction.secondnumber}]]*/;

function isValid(form){
  if(a>b)
    return true;
  else
    return false;
}

 $('#myform').submit(function(e){                                   
                    e.preventDefault();
                   if( isValid($(this))){                           
                    $.ajax({
                        type: 'post',
                         url: /*[[ @{'/result'} ]]*/,
                          data:  $form.serialize(),
                          success: function(returnedData){
                              console.log(returnedData);                      
                            },    

                            error: function(xhr, exception) {

                                }
                    }); 
                   }
                   else{
                       alert("Validation failed");
                   }
                });
</script>
 
</body>
</html>

Answer 1

您可以为此使用javascript / ajax。像下面一样

<script th:inline="javascript">

function isValid(form){
  if(condition)
    return true;
  else
    return false;

}
 $('#myform ').submit(function(e){                                   
                    e.preventDefault();
                   if( isValid($(this))){                           
                    $.ajax({
                        type: 'post',
                         url: /*[[ @{'/url'} ]]*/,
                          data:  $form.serialize(),
                          success: function(returnedData){
                              console.log(returnedData);                      
                            },    

                            error: function(xhr, exception) {

                                }
                    }); 
                   }
                   else{
                       alert("Validation failed");
                   }
                });
</script>

Answer 2

大量重试后，我自己找到了解决方法

 <script th:inline="javascript">
 
 

 
 $('#myform').submit(function(e){  
	
	var  a=parseInt($('#firstno').val(),10);
	console.log(a);
	var  b=parseInt($('#secondno').val(),10);
	console.log(b);
                   if(a>b){                           
                    $.ajax({
                        type: 'post',
                         url: "/result.html",
                          data: $('#myform').serialize(),
                          success: function(returnedData){
                        	  console.log("Success"); 
                        	  alert("success")
                            },    

                            error: function(xhr, exception) {
                            	console.log(exception);
                                }
                    }); 
                   }
                   else{
                       alert("Validation failed");
                       e.preventDefault(); 
                   }
                                     
                });
     
</script>

如何通过百叶窗和春季靴提交表单，并通过一些客户端javascript验证？

2 个答案: