Javascript jQuery是否使用循环进行验证？

我有一个相当大的表单，除了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;
    }
}

函数validateCompanyName（）{
//无效
if（companyname.val（）.length<4）{
公司名称removeClass（“完整”）；
companyname.addClass（“错误”）；
companynameInfo.text（“太短，请输入公司全名”）；
companynameInfo.removeClass（“完整”）；
companynameInfo.addClass（“错误”）；
返回false；
}
//有效的
否则{
companyname.removeClass（“错误”）；
companyname.addClass（“完整”）；
companynameInfo.text（“有效”）；
companynameInfo.removeClass（“错误”）；
companynameInfo.addClass（“完整”）；
返回true；
}
}
函数validateHrmanagerName（）{
//无效
if（hrmanagername.val（）.length<4）{
hrmanagername.removeClass（“完成”）；
hrmanagername.addClass（“错误”）；
hrmanagernameInfo.text（“太短，请输入全名”）；
hrmanagernameInfo.removeClass（“完成”）；
hrmanagernameInfo.addClass（“错误”）；
返回false；
}
//有效的
否则{
hrmanagername.removeClass（“错误”）；
hrmanagername.addClass（“完成”）；
hrmanagernameInfo.text（“有效”）；
hrmanagernameInfo.removeClass（“错误”）；
hrmanagernameInfo.addClass（“完成”）；
返回true；
}
}

---

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

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

$(".validate").each(//do stuff);

form.submit（函数（）{
if（validateCompanyName（）&&validateHrmanagerName（））//它是逻辑的，不是按位的
返回真值
其他的
返回false；
你可以这样做。
var x=$（“输入[name^='test-form']”）toArray（）；
对于（变量i=0；i

这就是我要做的，是jQuery验证程序插件工作原理的简化版本

在本例中，不是通过id选择单个输入，而是附加一个属性

数据验证

，以指示要验证的字段

<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>

然后调用插件，如下所示：

$(function() {
  $('#frmReferral').validate();
});

---

使用像Yup这样的验证框架，同意@ArunPJohny。使用插件。它易于使用并获得帮助。你的提交应该到此为止吗

$.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();
});