0
我是Spring MVC和JavaScript的新手，我嘗試使用JavaScript（客戶端）驗證視圖。驗證正在工作，但問題是，當發生錯誤時，我無法停止表單提交。它會發布方法。使用JavaScript Spring MVC客戶端驗證
如何在發生錯誤時停止提交？
我的看法是registration.jsp
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="<c:url value="/resources/js/j.js" />"></script>
<title>Insert title here</title>
</head>
<body>
<h2>Please,Do Registration</h2>
<form:form id="form" method="POST" action="/spring-ex02/user/reg"
commandName="login" >
<table>
<tr>
<td><form:label path="email">Email</form:label></td>
<td><form:input id="email" path="email" /></td>
<td><font id="emailError" style="color: red;">${emailExistError}
</font></td>
</tr>
<tr>
<td><form:label path="password">Password</form:label></td>
<td><form:input id="password" path="password" type="password"
/></td>
<td><font id="passwordError" style="color: red;">${passwordError}
</font></td>
</tr>
<tr>
<td><form:label path="confirmPassword">Confirm Password</form:label>
</td>
<td><form:input id="confirmPassword" path="confirmPassword"
type="password" /></td>
<td><font id="confirmPasswordError" style="color: red;"></font>
</td>
</tr>
<tr>
<td><form:label path="userDetail.firstname">First Name</form:label>
</td>
<td><form:input id="firstName" path="userDetail.firstname" /></td>
<td><font id="firstNameError" style="color: red;"></font>
</td>
</tr>
<tr>
<td><form:label path="userDetail.lastname">Last Name</form:label>
</td>
<td><form:input id="lastName" path="userDetail.lastname" /></td>
<td><font id="lastNameError" style="color: red;"></font> </td>
</tr>
<tr>
<td><form:label path="userDetail.address">Address</form:label></td>
<td><form:input id="address" path="userDetail.address" /></td>
<td><font id="addressError" style="color: red;"></font> </td>
</tr>
<tr>
<td><form:label path="userDetail.contact">Contact</form:label></td>
<td><form:input id="contact" path="userDetail.contact" /></td>
<td><font id="contactError" style="color: red;"></font>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" onclick="validate()" value="Sign Up"/>
</td>
</tr>
</table>
</form:form>
<form action="/spring-ex02/" method = GET>
<input type="submit" value="Back to Home">
</form>
</body>
</html>
我的js文件是J.js
function validate(){
var f=document.getElementById("form");
validateEmail(f);
validatePassword(f);
firstNameValidate(f);
lastNameValidate(f)
addressValidate(f);
contactValidate(f)
}
function validateEmail(form){
var error=document.getElementById("emailError");
var email=form["email"].value;
error.innerHTML="";
var regx = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|
(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-
Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(email==null || email==""){
error.innerHTML="Input Your Email";
}
else if(!email.match(regx)){
error.innerHTML="Invalid Email";
}
}
function validatePassword(form){
var error1=document.getElementById("passwordError");
var error2=document.getElementById("confirmPasswordError");
error1.innerHTML="Give Password";
var password=form["password"].value;
error1.innerHTML="";
error2.innerHTML="";
var confirmPassword=form["confirmPassword"].value;
if(password==null || password==""){
error1.innerHTML="Give Password";
}
else if(confirmPassword==null || confirmPassword==""){
error2.innerHTML="Confirm Password";
}
else if(password.length<5 || password.length>10){
error1.innerHTML="Password has to be 5 to 10 chars"
}
else if(password != confirmPassword){
error2.innerHTML="Password Does Not Match"
}
}
function firstNameValidate(from){
var error=document.getElementById("firstNameError");
var firstName=form["firstName"].value;
error.innerHTML="";
if(firstName==null || firstName==""){
error.innerHTML="Input Your FirstName";
}
else if(!isNaN(id)){
error.innerHTML="Name Can Not be a number";
}
else if(firstName.length<5 || firstName.length>10){
error1.innerHTML="Name has to be 5 to 10 chars"
}
}
function lastNameValidate(from){
var error=document.getElementById("lastNameError");
var lastName=form["lastName"].value;
error.innerHTML="";
if(lastName==null || lastName==""){
error.innerHTML="Input Your LastName";
}
else if(!isNaN(id)){
error.innerHTML="Name Can Not be a number";
}
else if(lastName.length<5 || lastName.length>10){
error1.innerHTML="Name has to be 5 to 10 chars"
}
}
function addressValidate(from){
var error=document.getElementById("addressError");
var address=form["address"].value;
error.innerHTML="";
if(address==null || address==""){
error.innerHTML="Input Your Address";
}
else if(!isNaN(id)){
error.innerHTML="Address Can Not be a number";
}
else if(address.length<5 || address.length>10){
error1.innerHTML="Address has to be 5 to 10 chars"
}
}
function contactValidate(from){
var error=document.getElementById("contactError");
var contact=form["contact"].value;
error.innerHTML="";
if(contact==null || contact==""){
error.innerHTML="Input Your Contact";
}
else if(isNaN(id)){
error.innerHTML="Name Can Not be alphabate";
}
else if(contact.length<5 || contact.length>10){
error1.innerHTML="Contact has to be 5 to 10 chars"
}
}
而不是顯式調用onclick提交按鈕更喜歡使用偶數監聽器機制。保持您的提交按鈕被禁用，也可以使用css將其顏色修改爲灰色直到其禁用。註冊每個元素以進行焦點輸出事件並執行焦點輸出驗證。如果驗證失敗，則驗證失敗時將布爾變量更新爲false。在每個元素的布爾值之間使用&&運算符。只有在元素的最終布爾值爲true時才應啓用提交。 – RaghaveShukla