Question

有人知道如何在循环输入时使用jQuery验证插件吗？我知道如何使验证插件工作的唯一方法是通过提交请求。但是，我正在处理一个多部分表单，该表单验证表单的每个步骤，并在用户浏览时突出显示必填字段。我想在此过程中添加验证，但不确定如何操作。理想情况下，我想验证的不仅仅是电话号码，也可能是电子邮件格式和reg exp。这里是我正在使用的代码：

function validateStep(step) {
  if(step == fieldsetCount) return;

  var error = 1;
  var hasError = false;
  $('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){
    var $this       = $(this);
    var valueLength = jQuery.trim($this.val()).length;

    if(valueLength == ''){
      if($(this).hasClass('req')) {
        hasError = true;
        $this.addClass('hasError');
      }
      else
        $this.removeClass('hasError');
    } else {
      $this.removeClass('hasError');
    }
  });  
}

有什么想法吗？

Answer 1

你问题中的代码对我来说并没有多大意义。如果你想使用jQuery Validation插件，那么验证会自动处理，你不需要手动循环任何输入。

就多步形式而言，有许多可能的方法。我更喜欢为每一步使用单独的form元素。然后我使用the .valid() method测试该部分，然后再移动到下一部分。 （不要忘记首先初始化插件;在DOM准备好的所有表单上调用.validate()。）

然后在最后一节，我在每个表单上使用.serialize()并将它们连接成一个要提交的数据查询字符串。

像这样......

$(document).ready(function() {

    $('#form1').validate({ // initialize form 1
        // rules
    });

    $('#gotoStep2').on('click', function() { // go to step 2
        if ($('#form1').valid()) {
            // code to reveal step 2 and hide step 1
        }
    });

    $('#form2').validate({ // initialize form 2
        // rules
    });

    $('#gotoStep3').on('click', function() { // go to step 3
        if ($('#form2').valid()) {
            // code to reveal step 3 and hide step 2
        }
    });

    $('#form3').validate({ initialize form 3
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           var data = $('#form1').serialize() + '&' + $('#form2').serialize() + '&' + $(form).serialize()
           // ajax submit
           return false; // block regular form submit action
        }
    });

    // there is no third click handler since the plugin takes care of this 
    // with the built-in submitHandler callback function on the last form.

});

重要的是要记住上面的click处理程序没有使用type="submit"按钮。这些是常规按钮，form代码的外部或type="button"。

只有最后一个表单上的按钮才是常规type="submit"按钮。那是因为我只在最后一种形式上利用插件的内置submitHandler回调函数。

“概念证明”DEMO：http://jsfiddle.net/j8vUt/

请参阅此参考：https://stackoverflow.com/a/19546698/594235

jQuery嵌套电话号码验证

1 个答案: