0

我有相当大的表格，连同 PHP 验证 (ofc) 我想使用 jQuery。我是 jQuery 的新手，但环顾四周后，我的一些代码运行良好。它正在检查文本框的长度，如果它低于一定长度，则不允许提交。如果条目较低，则文本框的颜色将变为红色。

我遇到的问题是表单太大，需要很长时间，并且需要大量代码来验证每个框。因此，我想知道有没有一种方法可以循环遍历所有变量，而不是每次都创建一个函数。

这是我所拥有的：

var form = $("#frmReferral");
var companyname = $("#frm_companyName");
var companynameInfo = $("#companyNameInfo");
var hrmanagername = $("#frm_hrManager");
var hrmanagernameInfo = $("#hrManagerInfo");

form.submit(function(){
    if(validateCompanyName() & validateHrmanagerName())
        return true
    else
        return false;
});

验证函数

function validateCompanyName(){
    // NOT valid
    if(companyname.val().length < 4){
        companyname.removeClass("complete");
        companyname.addClass("error");
        companynameInfo.text("Too Short. Please Enter Full Company Name.");
        companynameInfo.removeClass("complete");
        companynameInfo.addClass("error");
        return false;
    }
    //valid
    else{
        companyname.removeClass("error");
        companyname.addClass("complete");
        companynameInfo.text("Valid");
        companynameInfo.removeClass("error");
        companynameInfo.addClass("complete");
        return true;
    }
}

function validateHrmanagerName(){
    // NOT Valid
    if(hrmanagername.val().length < 4){
        hrmanagername.removeClass("complete");
        hrmanagername.addClass("error");
        hrmanagernameInfo.text("Too Short. Please Enter Full Name.");
        hrmanagernameInfo.removeClass("complete");
        hrmanagernameInfo.addClass("error");
        return false;
    }
    //valid
    else{
        hrmanagername.removeClass("error");
        hrmanagername.addClass("complete");
        hrmanagernameInfo.text("Valid");
        hrmanagernameInfo.removeClass("error");
        hrmanagernameInfo.addClass("complete");
        return true;
    }
}

正如您所看到的，对于 50 多个输入框，这将变得越来越大。我想也许一个循环会起作用，但不知道该怎么做。可能包含所有变量的数组？任何帮助都会很棒。

4

3 回答 3

1

这就是我要做的，并且是 jQuery 验证器插件如何工作的简化版本。

在这种情况下，您不是通过 id 选择单个输入，而是附加一个属性data-validation来指示要验证的字段。

<form id='frmReferral'>
  <input type='text' name='company_name' data-validation='required' data-min-length='4'>
  <input type='text' name='company_info' data-validation='required' data-min-length='4'>
  <input type='text' name='hr_manager' data-validation='required' data-min-length='4'>
  <input type='text' name='hr_manager_info' data-validation='required' data-min-length='4'>
  <button type='submit'>Submit</button>
</form>

然后你编写一个小 jQuery 插件来捕获表单的提交事件，循环遍历所有选择的元素$form.find('[data-validation]')并在它们上执行通用的通过/失败验证功能。这是该插件的快速版本：

$.fn.validate = function() {
  function pass($input) {
    $input.removeClass("error");
    $input.addClass("complete");
    $input.next('.error, .complete').remove();
    $input.after($('<p>', {
      class: 'complete',
      text: 'Valid'
    }));
  }

  function fail($input) {
    var formattedFieldName = $input.attr('name').split('_').join(' ');
    $input.removeClass("complete");
    $input.addClass("error");
    $input.next('.error, .complete').remove();
    $input.after($('<p>', {
      class: 'error',
      text: 'Too Short, Please Enter ' + formattedFieldName + '.'
    }));
  }

  function validateRequired($input) {
    var minLength = $input.data('min-length') || 1;
    return $input.val().length >= minLength;
  }

  return $(this).each(function(i, form) {
    var $form = $(form);
    var inputs = $form.find('[data-validation]');
    $form.submit(function(e) {
      inputs.each(function(i, input) {
        var $input = $(input);
        var validation = $input.data('validation');
        if (validation == 'required') {
          if (validateRequired($input)) {
            pass($input);
          }
          else {
            fail($input);
            e.preventDefault();
          }
        }
      })
    });
  });
}

然后你像这样调用插件：

$(function() {
  $('#frmReferral').validate();
});
于 2013-08-17T17:20:51.703 回答
0

您可以通过单个选择器为它们提供一个供 jQuery 使用的类。然后使用您的验证功能循环并处理每个案例。

$(".validate").each(//do stuff);
于 2013-08-17T16:31:00.280 回答
0 
    form.submit(function(){
        if(validateCompanyName() && validateHrmanagerName()) // Its logical AND not bitwise
            return true
        else
            return false;

You can do this.

var x = $("input[name^='test-form']").toArray();

for(var i = 0; i < x.length; i++){
  validateCompanyName(x[i]);
 validateHrmanagerName(x[i]);
}
于 2013-08-17T16:41:53.693 回答