Question

我正在学习javascript和jquery，我编写了以下代码来检查我的表单的某些输入是否已填充，如果它们是特殊样式的话。

代码工作正常，但我想知道写这个的最好方法是什么，也许它可以更短？

＆＃13;

$(document).ready(function () {
    $("#id_email").change(function () {
        var emailField = document.getElementById("id_email").value;
        
        if (emailField.indexOf("@") >= 0 && emailField.indexOf(".") >= 0) {
            $(this).attr( /* styling my field */ );
        } else {
            $(this).attr( /* styling my field */ );
        }
    });
    
    $("#id_last_name").change(function () {
        var nameField = document.getElementById("id_last_name").value;
        
        if (nameField.length > 0) {
            $(this).attr( /* styling if true */ );
        } else {
            $(this).attr( /* styling if false */ );
        }
    });
    
    $("#id_phone").change(function () {
        var phoneField = document.getElementById("id_phone").value;
        
        if (phoneField.length > 0) {
            $(this).attr( /* styling if true */ );
        } else {
            $(this).attr( /* styling if false */ );
        }
    });
    
    $("#id_company").change(function () {
        var companyField = document.getElementById("id_company").value;
        
        if (companyField.length > 0) {
            $(this).attr( /* styling if true */ );
        } else {
            $(this).attr( /* styling if false */ );
        }
    });
    
    $("#id_activity").change(function () {
        var activityField = document.getElementById("id_activity").value;
        
        if (activityField !== "---------") {
            $(this).attr( /* styling if true */ );
        } else {
            $(this).attr( /* styling if false */ );
        }
    });
});

＆＃13;

Answer 1

您可以使用简写if语句并使用$(this).val()代替document.getElementById("").value;：

$(document).ready(function() {
  $("#id_email").change(function() {
    var emailField = $(this).val();
    (emailField.indexOf("@") >= 0 && emailField.indexOf(".") >= 0) ? $(this).attr( /* styling my field */ ) : $(this).attr( /* styling my field */ );
  });

  $("#id_last_name").change(function() {
    var nameField = $(this).val();
    (nameField.length > 0) ? $(this).attr( /* styling if true */ ) : $(this).attr( /* styling if false */ );
  });

  $("#id_phone").change(function() {
    var phoneField = $(this).val();
    (phoneField.length > 0) ? $(this).attr( /* styling if true */ ) : $(this).attr( /* styling if false */ );
  });

  $("#id_company").change(function() {
    var companyField = $(this).val();
    (companyField.length > 0) ? $(this).attr( /* styling if true */ ) : $(this).attr( /* styling if false */ );
  });

  $("#id_activity").change(function() {
    var activityField = $(this).val();
    (activityField !== "---------") ? $(this).attr( /* styling if true */ ) : $(this).attr( /* styling if false */ );
  });
});

Answer 2

如果输入的样式相同，则可以创建方法。

  function stylingMyInput(element, type) {
    if (type === true) {
      element.attr( /* styling if true */ );
    } else {
      element.attr( /* styling if false */ );
    }

  }


  $("#id_email").change(function() {
    var emailField = document.getElementById("id_email").value;
    stylingMyInput(emailField, emailField.indexOf("@") >= 0 && emailField.indexOf(".") >= 0)
  });

  $("#id_last_name").change(function() {
    var nameField = document.getElementById("id_last_name").value;

    stylingMyInput(nameField,nameField.length > 0)
  });

Answer 3

您可以提供要检查公共类的所有输入元素（例如，input_field），然后将change事件一次附加到这些元素。然后在事件处理程序中，检查元素并根据需要应用样式：

$('.input_field').change(function(){
  if( (this.id=='id_email' && !validEmail(this.value))
      || (this.id=='id_last_name' && this.value.length == 0)
      || (this.id=='id_phone' && this.value.length == 0)
    ){    
      $(this).addClass('invalid');
      $(this).removeClass('valid');
  }
  else{
      $(this).addClass('valid');
      $(this).removeClass('invalid');
  }         
});

JSFiddle

简单实时jquery表单验证器

3 个答案: