Javascript 在一个元素中获取所有data-*属性，并将它们放入数组中

我有一个表单，它使用可以被看作页面的字段集

1个字段集=1页

最后的这些字段集将是动态的，来自数据库等。 我需要找到一种方法从字段集中的输入中获取所有数据-*属性。用于验证规则。因为它们也是动态的。取决于客户的需求

<form id="msform">
        <!-- progressbar -->

        <!-- fieldsets foreach every group -->
        <fieldset>

            <h2 class="fs-title">Create your account</h2>
            <h3 class="fs-subtitle">This is step 1</h3>
            <!-- foreach every input that belongs to the group -->
            <input type="text" name="email" placeholder="Email" data-email="true" data-required="true" />
            <input type="password" name="pass" placeholder="Password" id="pass" data-required="true" />
            <input type="password" name="cpass" placeholder="Confirm Password" data-required="true" data-equalto="#pass" />
            <input type="button" name="next" class="next action-button" value="Next" />
        </fieldset>
        <fieldset>
            <h2 class="fs-title">Social Profiles</h2>
            <h3 class="fs-subtitle">Your presence on the social network</h3>
            <input type="text" name="twitter" placeholder="Twitter" />
            <input type="text" name="facebook" placeholder="Facebook" />
            <input type="text" name="gplus" placeholder="Google Plus" />
            <input type="button" name="previous" class="previous action-button" value="Previous" />
            <input type="button" name="next" class="next action-button" value="Next" />

        </fieldset>
        <fieldset>
            <h2 class="fs-title">Personal Details</h2>
            <h3 class="fs-subtitle">We will never sell it</h3>
            <input type="text" name="fname" placeholder="First Name" />
            <input type="text" name="lname" placeholder="Last Name" />
            <input type="text" name="phone" placeholder="Phone" />
            <textarea name="address" placeholder="Address"></textarea>
            <input type="button" name="previous" class="previous action-button" value="Previous" />
            <input type="button" name="next" class="next action-button" value="Next" />
        </fieldset>
        <fieldset>
            <h2 class="fs-title">Terms Of Service</h2>
            <h3 class="fs-subtitle">We will never sell it</h3>
            <input type="text" name="fname" placeholder="First Name" />
            <input type="text" name="lname" placeholder="Last Name" />
            <input type="text" name="phone" placeholder="Phone" />
            <textarea name="address" placeholder="Address"></textarea>
            <input type="button" name="previous" class="previous action-button" value="Previous" />
            <input type="submit" name="submit" class="submit action-button" value="Submit" />
        </fieldset>
    </form>

创建您的帐户
这是第一步
社会概况
你在社交网络上的存在
个人资料
我们永远不会卖掉它
服务条款
我们永远不会卖掉它

如何循环所有输入？ 关键是验证用户何时单击下一步（下一页），但仍将所有内容保持在一个表单中

有人有主意吗

---

从您的需求和html来看，所有规则似乎都以

数据-*

作为前缀，因此您可以使用数据api

$（'#msfieldset form'）。查找（':input'）。每个（函数（）{
var data=$（this.data（）；
console.log（'element'，this.name）；
console.log（数据，数据）
$。每个（数据、函数（键、值）{
console.log（键、值）
})
})

创建您的帐户
这是第一步
社会概况
你在社交网络上的存在
个人资料
我们永远不会卖掉它
服务条款
我们永远不会卖掉它

单击“下一步”时，您已经获得了当前字段集，只需获取所有子项输入并验证它们即可。基本示例：

error = false;
    inputs = current_fs.children('input');
    inputs.each(function() {
        if ($(this).val() == '') {
            alert($(this).attr('name') + ' may not be empty.');
            error = true;
        }
    });
    if(error) {
        animating = false;
        return false;
    }

---

请参见

您可以使用以下方法获取特定页面的字段集：

var fieldset = document.querySelectorAll('#formId fieldset')[pageNumber];

然后，您可以使用以下命令获取字段集中的所有表单控件（输入、选择、文本区域等）：

然后，您可以在控件集合上循环，并使用class或data属性确定验证类型，例如，对于需要且必须为整数的文本输入：

<input name="foo" class="fv-required fv-int">

---

对于较旧的浏览器，在自己的属性上使用For..in循环，并获取名称与

/^data-/

匹配的属性。或者，您可以循环查看所有可能的数据属性列表，看看元素具有哪些属性，但这可能不是最佳的。

如果您对使用库很满意，我会说，使用我认为您只是在寻找

数据-*

attributes@LearningNeverStops试过了,，该插件将一次性验证整个表单，而我当时只需要验证该页面。@ArunPJohny抱歉，是的，更改了我的帖子。@user3446397啊，是的。。我发现这是在做我想做的，这对我很有帮助！谢谢$（msform>fieldset:visible'）.find（':input'）.each（function（）{var data=$（this.data（）；console.log（'element'，this.name）；console.log（data，data）；$.each（data，function（key，value）{console.log（key，value）}）`

<input name="foo" class="fv-required fv-int">

element.dataset