Javascriptフォームの検証（返品問題）

Question

Javascriptフォームの検証に問題があります.Javascriptフォームの検証では、真であるかどうか、値がないかどうかを返します。最初のif/else文それは真実か偽か）、そこからは機能しません.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; 
     } 

    }); 

Answer 1

戻り値関数から抜け出すだろう。代わりに、フラグを設定し、そのフラグを最後に返します。

$('#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; 
 
    });