Jquery对表单子验证的验证

Question

我想为使用Jquery的项目开发一个验证脚本，这个想法是使用提交的任何表单的验证脚本，因此表单ID会有所不同，也会形成元素和表单动作或方法。因此我写了下面的脚本，但是当第一个字段通过验证并且无论如何提交表单时，它都没有处理第2步。

$(document).on('submit', 'form', function (e) { 
    var form_Submited = $(this).attr("name"); 
    var form_Action = $(this).attr("action"); 
    var form_Information = $(this).serialize(); 
    var form_Elements = $(this)[0].elements; 
    var i = 0; 

    e.preventDefault(); 

    function Validation(){ 
     for (i; i < form_Elements.length; i++) { 
      if (form_Elements[i].type === "text" && form_Elements[i].value === " " || form_Elements[i].value === null || form_Elements[i].value === 0 || form_Elements[i].value.length < 1) { 
       console.log(form_Elements[i].name + ": " + form_Elements[i].value.length); 
       return false;    
      } 
      else if (form_Elements[i].type === "password" && form_Elements[i].value === " " || form_Elements[i].value === null || form_Elements[i].value === 0 || form_Elements[i].value.length < 1) { 
       console.log(form_Elements[i].name + ": " + form_Elements[i].value.length); 
       return false;    
      } 
      else{ 
       return true; 
      } 
     } 
    } 

    if(Validation() === true){ 
      $.ajax({ 
       url: form_Action, 
       data: form_Information, 
       type: "GET", 
       dataType: "json", 
       success: function (data) { 
        $.each(data, function (propName, val) { 
         $("#post-wrapper").append("<table><tr>"); 
         $("#post-wrapper").append("<td>"); 
         $("#post-wrapper").append(propName + ": " + val); 
         $("#post-wrapper").append("</td>"); 
         $("#post-wrapper").append("</tr></table>"); 
        }); 
       }, 
       error: function() { 
        console.log('Cannot retrieve data.'); 
       } 
      }); 
    } 
}); 

希望可以清楚地理解它:(

问候，

G.

Answer 1

，这是因为您的验证（）函数中发生的事情，里面的for循环，在第一次迭代它检查第一个字段的有效性，如果有效返回true，这是不正确的，这就是为什么如果第一个字段是有效的表单提交，你应该只在for循环完成后返回true

还要注意，在你的if和else条件下，你需要把or（||）部分放在'（''）'中。 & &操作符比或（||）

修改后的代码（除去其他条件，把for循环+括号返回true之外加入if和else if条件）更优先：

$(document).on('submit', 'form', function (e) { 
var form_Submited = $(this).attr("name"); 
var form_Action = $(this).attr("action"); 
var form_Information = $(this).serialize(); 
var form_Elements = $(this)[0].elements; 
var i = 0; 

e.preventDefault(); 


function Validation(){ 
    var valid = true; 
    for (var i=0; i < form_Elements.length; i++) { 
     if (form_Elements[i].type === "text" && (form_Elements[i].value === " " || form_Elements[i].value === null || form_Elements[i].value === 0 || form_Elements[i].value.length < 1)) { 
      console.log(form_Elements[i].name + ": " + form_Elements[i].value.length); 
      return false;   
     } 
     else if (form_Elements[i].type === "password" && (form_Elements[i].value === " " || form_Elements[i].value === null || form_Elements[i].value === 0 || form_Elements[i].value.length < 1)) { 
      console.log(form_Elements[i].name + ": " + form_Elements[i].value.length); 
      return false;    
     } 
    } 
    return true; 
} 

if(Validation() === true){ 

    $.ajax({ 
      url: form_Action, 
      data: form_Information, 
      type: "GET", 
      dataType: "json", 
      success: function (data) { 
       $.each(data, function (propName, val) { 
        $("#post-wrapper").append("<table><tr>"); 
        $("#post-wrapper").append("<td>"); 
        $("#post-wrapper").append(propName + ": " + val); 
        $("#post-wrapper").append("</td>"); 
        $("#post-wrapper").append("</tr></table>"); 
       }); 
      }, 
      error: function() { 
       console.log('Cannot retrieve data.'); 
      } 
     }); 


} 

});