2017-01-03 78 views
1

我的Javascript表單驗證存在一個問題,我試圖返回它是否爲true以及值是否工作。它只返回第一個if/else語句(是否這是真的或假的),並從那裏它不起作用。一旦你看到的JavaScript,你應該能夠明白我想要做的。Javascript表單驗證(返回問題)

$('#button').click(function(){ 
    name = $("#name").val(); //name input 
    age = $("#age").val(); //age input 
    sex = $("#sex").val(); // sex input 

    if(name.match(/(\w)\s(\w)/)){ 
     return true; 
    } 
    else { 
      $('.form-row:first-child').css('border','1px solid red'); 
      return false; 
    } 

    if (age < 0 || age > 130 || isNaN(age)) { 
      $('.form-row:nth-child(2)').css('border','1px solid red'); 
      return false; 
    } 
    else { 
     return true; 
    } 

     if (sex == "male" || sex == "Male" || sex == "female" || sex == "Female"){ 
      return true; 
     } 
     else { 
      $('.form-row:nth-child(3)').css('border','1px solid red'); 
      return false; 
     } 

    }); 

回答

0

回報將打出來的功能。相反,設置一個標誌並在最後返回該標誌。

$('#button').click(function(){ 
 
    returnFlag = false 
 
    name = $("#name").val(); //name input 
 
    age = $("#age").val(); //age input 
 
    sex = $("#sex").val(); // sex input 
 

 
    if(name.match(/(\w)\s(\w)/)){ 
 
     returnFlag = true; 
 
    } 
 
    else { 
 
      $('.form-row:first-child').css('border','1px solid red'); 
 
      returnFlag = false; 
 
    } 
 

 
    if (age < 0 || age > 130 || isNaN(age)) { 
 
      $('.form-row:nth-child(2)').css('border','1px solid red'); 
 
      returnFlag = false; 
 
    } 
 
    else { 
 
     returnFlag = true; 
 
    } 
 

 
     if (sex == "male" || sex == "Male" || sex == "female" || sex == "Female"){ 
 
      returnFlag = true; 
 
     } 
 
     else { 
 
      $('.form-row:nth-child(3)').css('border','1px solid red'); 
 
      returnFlag = false; 
 
     } 
 

 
    return returnFlag; 
 
    });

+0

現在的問題是,第一*的if..else *可能的標誌設置爲false,但未來可能將其重置爲true ... – RobG

+0

你說得對,我沒有」你甚至可以考慮一下。我想實際返回false的地方returnFlag == false將取決於用例。 – cbronson

+1

* returnFlag *可以初始化爲* true *,然後在測試結束時不設置,如果測試失敗,則設置爲* false *。 ;-) – RobG