jQuery嵌套电话号码验证答案

【问题标题】：jQuery nested phone number validationjQuery嵌套电话号码验证
【发布时间】：2013-11-25 16:43:27
【问题描述】：

有谁知道在循环输入时如何使用 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');
    }
  });  
}

有什么想法吗？

【问题讨论】：

您是否尝试过在一个步骤的元素而不是整个表单上调用valid()？

标签： javascript jquery validation nested-loops phone-number

【解决方案1】：

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

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

然后在最后一部分，我在每个表单上使用.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 回调函数。

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

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

【讨论】：