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(); 

，并检查确认后，提交表单，如果验证成功。