Question

我有相当大的形式和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多个输入框，这将变得越来越大。我想也许一个循环可以工作，但不知道哪种方式去做。可能包含所有变量的数组？任何帮助都会很棒。

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

Answer 2

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

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

Answer 3

    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]);
}

jQuery使用循环验证？

3 个答案: