在这篇文章中，Web开发人员和DZone MVB介绍了如何通过验证数组来启用和禁用一组元素的技术。

今天，我们介绍如何通过验证数组来启用和禁用一组元素的技术。

当涉及到前端的复杂业务逻辑时，Web应用程序变得越来越难以编写。

根据复杂性，可能需要您在提交之前接受一组输入并验证这些元素。

我提交的最近一个屏幕需要多个DOM元素在启用提交或“操作”按钮之前处于特定状态。

当一组DOM元素处于特定状态时，我们希望触发其他元素。

我知道你在想什么。为什么不使用jQuery进行验证？

原因如下：

1. 对于这个任务，我们需要jQuery和不显眼的验证库。这是我们真正不需要的两个大型图书馆。

2. 借助最新的JavaScript特性，您会惊讶于浏览器中已有多少功能，以及您甚至可能不再需要jQuery。

3. 我想要一个快速和整洁的解决方案来解决这个问题。

据说，我着手寻找一种更简单的方式来有条件地验证DOM元素组。

一个简单的例子

让我们用一个网格来设置一个简单的场景。

Views/Home/Index.cshtml

@model EventViewModel

@{

ViewData["Title"] = "Grouped Validations";

}

<style>

th:nth-child(1) {

width: 20px

}

</style>

<h2>Events</h2>

@using (Html.BeginForm())

{

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">

<div class="btn-group mr-2" role="group" aria-label="First group">

<button id="enabled-button" type="button" disabled="disabled" class="btn btn-info disabled">Enable</button>

<button id="disabled-button" type="button" disabled="disabled" class="btn btn-info disabled">Disable</button>

</div>

</div>

<table class="table table-condensed table-bordered table-striped">

<thead>

<tr>

<th><input type="checkbox" id="select-all" /></th>

<th>Event</th>

<th>Begin Date</th>

<th>End Date</th>

</tr>

</thead>

<tbody>

@foreach (var eventModel in Model.Events)

{

<tr>

<td><input name="select" class="event-checkbox" type="checkbox" value="@eventModel.EventId" /></td>

<td><a title="Go to @eventModel.Title" href="@eventModel.Url.AbsoluteUri">@eventModel.Title</a></td>

<td>@eventModel.BeginDate.ToShortDateString()</td>

<td>@eventModel.EndDate.ToShortDateString()</td>

</tr>

}

</tbody>

</table>

}

这个网格在左边有复选框，带有批按钮来启用和禁用事件。点击标题中的复选框将选择所有这些选项。

首先，我们需要受用户操作影响的元素。

this.enabledButton = document.getElementById("enabled-button");

this.disabledButton = document.getElementById("disabled-button");

接下来，我们需要我们的验证。这些验证存储在包含以下项目的数组中：

1. 要启用/禁用的元素。

2. 一个简单的条件。

3. 条件为真时的lambda。

4. 条件为false时的lambda。

我们的验证数组看起来像这样：

// Custom validations for enabling/disabling DOM elements based on conditions.

this.validations = [

{

// When should the enable button be active?

element: this.enabledButton,

condition: () => {

var checkedCheckboxes = areChecked();

var valid = (

// Do we have even one checkbox selected?

checkedCheckboxes.length > 0

);

return valid;

},

trueAction: (elem) => {

elem.removeAttribute("disabled");

elem.classList.remove("disabled");

},

falseAction: (elem) => {

elem.setAttribute("disabled", "disabled");

elem.classList.add("disabled");

}

},

// Second validation

{

// When should the disable button be active?

element: this.disabledButton,

condition: () => {

var checkedCheckboxes = areChecked();

var valid = (

// No checkboxes are available, time to disable.

checkedCheckboxes.length > 0

);

return valid;

},

trueAction: (elem) => {

elem.removeAttribute("disabled");

elem.classList.remove("disabled");

},

falseAction: (elem) => {

elem.setAttribute("disabled", "disabled");

elem.classList.add("disabled");

}

}

];

我们基本上建立了一个“编码阵列”。这个数组拥有我们编写数据驱动代码所需的一切。

如果您发现 trueAction并且 falseAction，我们正在建立的拉姆达接收的元素。一旦我们收到元素，我们就会将某些属性应用到DOM元素，当它是真或假操作时。

我们的条件可以像我们需要的那样复杂，以启用或禁用某些DOM元素。

启用/禁用元素

为了使我们的DOM元素可用或禁用，我们需要遍历我们的验证并对其执行操作; 所以，我们将使用该 map功能。

function updateValidations() {

Array.from(validations).map( (item, index, array) => {

if (item.condition()) {

item.trueAction(item.element);

} else {

item.falseAction(item.element);

}

});

}

一旦我们有我们的功能来启用或禁用DOM元素，我们需要将我们的事件附加到复选框。

// Set the "select all" checkbox.

var checkAll = document.getElementById("select-all");

checkAll.addEventListener("change", checkAllCheckbox);

我们的变化事件 checkAllCheckbox当然会称为我们的 updateValidations();功能。

function checkAllCheckbox() {

var allCheckbox = document.getElementById("select-all");

var eventCheckboxes = Array.from(

document.getElementsByClassName("event-checkbox")

);

eventCheckboxes.map( (elem, index, array) => {

elem.checked = allCheckbox.checked;

});

updateValidations();

}

所有这些都不使用jQuery或验证库。

浏览器阻断

当然，总会遇到一些......呃......某些浏览器。

一些用户报告了复选框单击不与其他复选框一起工作的问题。

我想知道=>旧版浏览器的arrow（）语法。

所以我去了caniuse.com以确认这是否可以与其他浏览器一起使用。

你不知道吗？我去了箭头语法，发现这个：caniuse.com/#search=arrow

由于我们不能使用箭头语法，所以修复非常简单。

而不是这样做：

{

// When should the enable button be active?

element: this.enabledButton,

condition: () => {

var checkedCheckboxes = areChecked();

var valid = (

// Do we have even one checkbox selected?

checkedCheckboxes.length > 0

);

return valid;

},

trueAction: (elem) => {

elem.removeAttribute("disabled");

elem.classList.remove("disabled");

},

falseAction: (elem) => {

elem.setAttribute("disabled", "disabled");

elem.classList.add("disabled");

}

},

我们做得到：

{

// When should the enable button be active?

element: this.enabledButton,

condition: function () {

var checkedCheckboxes = areChecked();

var valid = (

// Do we have even one checkbox selected?

checkedCheckboxes.length > 0

);

return valid;

},

trueAction: function (elem) {

elem.removeAttribute("disabled");

elem.classList.remove("disabled");

},

falseAction: function (elem) {

elem.setAttribute("disabled", "disabled");

elem.classList.add("disabled");

}

},

请记住，拉姆达只是匿名代表。用一个简单的函数替换箭头语法可以实现向后兼容性的奇迹。

对于项目来源，请查看我的GitHub存储库。

结论

一旦建立起来，我就可以在多个页面上使用这个功能，以便“引导”用户在屏幕上可以或不可以执行的操作。当一个DOM元素被启用时，它触发另外两个元素供用户在屏幕上进行交互。

这可以很容易地修改为使用提交按钮。如果满足所有这些条件，请启用提交按钮。如果不是，则禁用它直到满足所有条件。

再次，您可以根据需要将其设置为复杂或简单。