堆棧內存溢出
  簡體   English   中英

使用JavaScript Spring MVC客戶端驗證

[英]Using JavaScript Spring MVC Client Side Validation

 原文  2016-02-12 03:19:29  2   3    javascript/ spring-mvc

問題描述

我是Spring MVC和JavaScript的新手，我正在嘗試使用JavaScript（客戶端）驗證視圖。 驗證有效，但問題是，發生錯誤時，我無法停止表單提交。 將要發布方法。

如果發生錯誤，如何停止提交？

我的看法是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 = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|
      (".+"))@((\[[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"
    }       

}

3 個解決方案

解決方案1
 2 已采納  

問題是您沒有取消表單提交事件。

要取消提交的表單，並進行少量更改，請嘗試一下。 

 <input type="submit" onclick="return validate()" value="Sign Up"/> <!-- added `return` -->

另外，您還需要修改腳本，因為false返回值將取消事件： 

function validate(){
    var f=document.getElementById("form");
    return (validateEmail(f) &
           validatePassword(f) &
           firstNameValidate(f) &
           lastNameValidate(f) &
           addressValidate(f) &
           contactValidate(f));
}

您還需要修改驗證函數以返回布爾值。 

function validateEmail(form){
     //your validaton logic
     return "" === error.innerHTML;
}

其余功能必須做同樣的事情

解決方案2
 0  2016-02-12 03:45:01

鞏固您的驗證方法。 失敗時使用event.preventDefault()

解決方案3
 0  2016-02-12 03:49:28

將返回參數分配給每個驗證函數。 以下是J.js的更新代碼 

function validate(){
var f=document.getElementById("form");

var hasEmailError = validateEmail(f);
var hasPasswordError = validatePassword(f);
var hasFirstNameError = firstNameValidate(f);
var hasLastNameError = lastNameValidate(f)
var hasAddressError = addressValidate(f);
var hasContactError = contactValidate(f);

if(!hasEmailError || !hasPasswordError || !hasFirstNameError || !hasLastNameError || !hasAddressError || !hasContactError)
return false;
else
return true;
}

function validateEmail(form){
var error=document.getElementById("emailError");

var email=form["email"].value;
error.innerHTML="";
var regx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|
(".+"))@((\[[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";
}
if(error.innerHTML.length > 0)
return false;
else
return true;
}

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"
}
if(error1.innerHTML.length > 0 || error2.innerHTML.length > 0)
return false;
else
return true;


}


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){
error.innerHTML="Name has to be 5 to 10 chars"
}

if(error.innerHTML.length > 0)
return false;
else
return true;
}

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){
error.innerHTML="Name has to be 5 to 10 chars"
}       
if(error.innerHTML.length > 0)
return false;
else
return true;
}

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){
error.innerHTML="Address has to be 5 to 10 chars"
}       
if(error.innerHTML.length > 0)
return false;
else
return true;
}

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){
error.innerHTML="Contact has to be 5 to 10 chars"
}       
if(error.innerHTML.length > 0)
return false;
else
return true;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 MVC 如何使用 javascript 向單選按鈕添加客戶端驗證 MVC 3：客戶端驗證事件后的Javascript 使用Javascript進行客戶端出生日期驗證 使用JavaScript進行客戶端日期驗證 客戶端javascript上的驗證 PhoneAttribute 的 MVC 客戶端驗證 客戶端驗證在 MVC 中不起作用 如何在MVC 4中不使用模型的情況下進行客戶端驗證 使用PHP進行Javascript客戶端驗證 丟失客戶端JavaScript驗證
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM