jQuery嵌套的电话号码验证

jQuery nested phone number validation

本文关键字：验证 电话号码 嵌套 jQuery      更新时间：2023-10-11

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

有什么想法吗？

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

就多步骤形式而言，有许多可能的方法。我更喜欢为每个步骤使用单独的form元素。然后，我使用.valid()方法测试该部分，然后再转到下一部分（不要忘记首先初始化插件；在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回调函数

"概念验证"演示：http://jsfiddle.net/j8vUt/

请参阅以下内容以供参考：https://stackoverflow.com/a/19546698/594235

相关文章：