AJAX提交之前的JavaScript驗證

Question

我想在允許提交ajax之前驗證表單，但是我有兩個問題。第一個問題是我不知道如何在提交之前驗證最好（最專業的過程）。第二個問題是，什麼阻止了我目前正在使用的驗證代碼？希望變得更有效率，以便歡迎所有的投入。萬分感謝。

$('#form-reg').on('submit', function(){ 
 

 
    var bool = false; 
 
    var name = document.getElementById('#name-reg'); 
 
    var email = document.getElementById('#email-reg'); 
 

 
    console.log(name); 
 
    console.log(email); 
 
    if(!/[^a-zA-Z]/.test(name)){ 
 
     bool = true; 
 
    } 
 
    else{ 
 
     bool = false; 
 
    } 
 
    if(bool == true){ 
 
     console.log(document.getElementById('#name-reg')); 
 
     $('#form-reg').slideUp('slow'); 
 
     // serialize the form 
 
     var formData = $(this).serialize(); 
 
     console.log(formData); 
 
     $.ajax({ 
 
      type  : 'POST', 
 
      url   : 'register.php', 
 
      data  : formData, 
 

 
      success: function() { 
 
       alert("Success"); 
 
      }, 
 
      error: function(xhr) { 
 
       alert("fail"); 
 
      } 
 
     }) 
 
     .done(function (data) { 
 
       document.getElementById('form-reg').reset(); 
 

 
     }) 
 
     .fail(function (error) { 
 
      alert("POST failed"); 
 
     }); 
 
     //return false; 
 
     } 
 
     else { 
 
     alert('try again'); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"> 
 

 
    <form id = "form-reg"> 
 
     <label id ="x" for="name">Name</label> 
 
     <input id="name-reg" name="name"></br> 
 
     <label id = "y" for="email">Email</label> 
 
     <input id="email-reg" name="email"></br> 
 
     <input type="submit" value="submit" id = "submit-reg"> 
 
    </form>

Answer 1

雖然這是一個小問題，但我仍會發表。該問題看起來像使用

var name = document.getElementById（'＃name-reg'）;

＃就會造成第一個問題，應該是

變量名稱= $（ '＃名稱-REG'）VAL（）。

$('#form-reg').on('submit', function(){ 
 

 
    var bool = false; 
 
    var name = $('#name-reg').val(); 
 
    var email = $('#email-reg').val(); 
 

 
    console.log(name); 
 
    console.log(email); 
 
    if(!/[^a-zA-Z]/.test(name)){ 
 
     bool = true; 
 
    } 
 
    else{ 
 
     bool = false; 
 
    } 
 
    if(bool == true){ 
 
     console.log($('#name-reg').val()); 
 
     $('#form-reg').slideUp('slow'); 
 
     // serialize the form 
 
     var formData = $(this).serialize(); 
 
     console.log(formData); 
 
     $.ajax({ 
 
      type  : 'POST', 
 
      url   : 'register.php', 
 
      data  : formData, 
 

 
      success: function() { 
 
       alert("Success"); 
 
      }, 
 
      error: function(xhr) { 
 
       alert("fail"); 
 
      } 
 
     }) 
 
     .done(function (data) { 
 
       document.getElementById('form-reg').reset(); 
 

 
     }) 
 
     .fail(function (error) { 
 
      alert("POST failed"); 
 
     }); 
 
     //return false; 
 
     } 
 
     else { 
 
     alert('try again'); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"> 
 

 
    <form id = "form-reg"> 
 
     <label id ="x" for="name">Name</label> 
 
     <input id="name-reg" name="name"></br> 
 
     <label id = "y" for="email">Email</label> 
 
     <input id="email-reg" name="email"></br> 
 
     <input type="submit" value="submit" id = "submit-reg"> 
 
    </form>

Answer 2

與您的代碼的問題是，你必須停止表單提交，如：

$('#form-reg').on('submit', function(e){ 
    e.preventDefault(); 

，並檢查確認後，提交表單，如果驗證成功。