フォームがfalseを返してもまだ送信しているのはなぜですか？

Question

このコードは、送信ボタンを使用して名前と年齢フィールドを含むフォームを送信します。私のコードは次のようになります。

function checkForm() { 
 
    var name = document.forms["form"]["name"].value; 
 
    var age = document.forms["form"]["age"].value; 
 
    var regName = /^[A-Z]*[a-z]{3,} $/; 
 
    var regAge = /^[\d.*]{1,} $/; 
 

 
    if (name == regName && age == regAge) { 
 
    return true; 
 

 
    } else { 
 
    return false; 
 
    } 
 
}

<form name="form" action="register.php" method="POST" onsubmit="return checkForm()"> 
 
    <p>Name:</p> 
 
    <input type="text" name="name" id="name"> 
 
    <br> 
 
    <p>Age:</p> 
 
    <input type="text" name="age" id="age"> 
 
    <br> 
 
    <br> 
 
    <button type="submit" name="submit">Submit</button> 
 
</form>

名は、数値と、正の整数でなければならない唯一の大文字と小文字と年齢を使用する必要があります。

間違ったデータを入力した場合、フォームはfalseを返してはいけませんが、trueを返してregister.phpに送信します。私のコードに何か問題がありますか？

Answer 1

フォームのデフォルトの動作は、送信時に関数を呼び出す場合、送信されます。したがって、ボタン送信時に関数を呼び出すことができます。

<button type="submit" name="submit" onsubmit="return checkForm()">Submit</button> 

Answer 2

event.preventDefault（）;を追加してください。データが無効な場合

function checkForm(event){ 
    var name = document.forms["form"]["name"].value; 
    var age = document.forms["form"]["age"].value; 
    var regName = /^[A-Z]*[a-z]{3,} $/; 
    var regAge = /^[\d.*]{1,} $/; 

    if (name == regName && age == regAge){ 
     return true; 

    } else{ 
    event.preventDefault(); 
     return false; 
    } 
} 

Answer 3

これはOPがすでに持っているものと同じに動作しますpattern.test('stringMethod')

function checkForm(event){ 
    var name = document.forms["form"]["name"].value; 
    var age = document.forms["form"]["age"].value; 
    var regName = /^[A-Z]*[a-z]{3,} $/; 
    var regAge = /^[\d.*]{1,} $/; 
    if (regName.test(name) && regAge.test(age)){ 
     return true; 
    } else{ 
    event.preventDefault(); 
     return false; 
    } 
}