jQuery使用循环进行验证

jQuery Use Loop for Validation?

本文关键字：验证 循环 jQuery      更新时间：2023-09-26

我有一个相当大的表单，加上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多个输入框，这将变得越来越大。我想也许一个循环会起作用，但不确定该怎么做。可能是包含所有变量的数组？任何帮助都会很棒。

这就是我要做的，也是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();
});

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

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

    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]);
}
相关文章：