Firefox重新排列表单输入属性的顺序

Question

有没有人知道这件事，以及如何防止它。

我通过AJAX使用php文件中的表单填充div。 input元素在php

中写成如下

echo ('<input type="text" name="court_type_name" id="court_type_name_input-' . $itemID . '" class="dataField" data-rule-length="4,6" data-rule-required="true" />');

我根据属性的顺序进行表单验证。后来的属性具有更高的优先级。例如，这种情况“必需”优先于长度中间

在Chrome Inspect中，我看到以下内容。这是我最初编写的方式，代码按预期工作。

<input type="text" name="court_type_name" id="court_type_name_input-9" class="dataField" data-rule-length="4,6" data-rule-required="true">

但是在Firefox检查中我看到以下内容。请注意，属性的顺序已更改。这导致'data-rule-length'优先于'data-rule-required'。

FF Inspect的ScreenShot：

除此之外。还有更多的不一致。

如果我在Inspect窗口中复制/粘贴，我会得到完全不同的属性顺序。与我原来的不同，不同于FF Inspect中的视觉效果。然而，代码与视觉表示一致。

<input name="court_type_name" id="court_type_name_input-9" class="dataField" data-rule-length="4,6" data-rule-required="true" type="text">

Answer 1

据我所知，它无法关闭。这是FF显示它的方式 如果您右键单击并选择Edit as HTML，则应显示原始订单 属性的顺序不应该影响结果，但同样，它只是以重新排序的方式显示。

Answer 2

根据定义，属性是无序的。您不能依赖它们出现的顺序。您必须以其他方式对该信息进行编码。例如另一个数据属性。

data-rules="length required" data-rule-length="4,6" data-rule-required="true"