使用Alpine.js和iodine.js轻巧验证

现代用户期望在表单验证期间立即反馈。本文演示了两个轻巧的JavaScript库Alpine.js和iodine.js如何创建高度交互式的形式，其间接费用最小，非常适合小型静态站点或服务器渲染的应用程序（例如Rails或Laravel）。这些库避免了重型JavaScript构建工具的复杂性。

我们将通过逐步增强验证，展示Alpine.js和iodine.js的API。最终表格提供了无效输入的即时反馈。

介绍alpine.js和iodine.js

Alpine.js是CDN托管的库，不需要构建步骤或依赖项。它的简洁文档和小尺寸（8.36 kb缩小和GZPIESP）使其效率非常高。它被描述为具有类似Vue的模板的JQuery/Vanilla JavaScript替换，而不是较大框架的竞争对手。

iodine.js是一个微型表单验证库，旨在与任何前端框架轻松集成。它通过每个输入字段允许多个规则并提供明显的错误消息来简化验证。

iodine.js行动：一个基本示例

这是使用iodine.js的基本客户端验证示例，该示例通过CDN获取：

 // ...（iodine.js cdn链接将转到这里）...

或者，使用Skypack：

从“ https://cdn.skypack.dev/@kingshott/iodine”进口Kingshottiodine；

从Skypack导入时，请记住使用kingshottIodine 。碘is方法检查输入有效性针对指定的规则。否则，它返回到有效输入或错误字符串的true 。

我们将使用HTML数据属性来存储每个输入的验证规则：

<input type="text" name="username" data-rules='["required", "minLength:5"]'>

香草JavaScript处理验证：

令form = document.getElementById（“ form”）;
令输入= [... form.queryselectorall（“输入[数据规则）”）];

功能onsubmit（event）{
  inputs.map（（输入）=> {
    if（iodine.is（input.value，json.parse（input.dataset.rules））！== true）{
      event.preventDefault（）;
      input.classlist.add（“无效”）;
    }
  }）;
}
Form.AddeventListener（“提交”，OnSubmit）;

这个基本示例缺乏用户友好性。它没有提供错误消息，也不会动态更新。

使用Alpine.js增强

Alpine.js改善了用户体验。我们将验证模糊或输入更改，提供即时反馈而不会中断输入。通过CDN包括Alpine.js：

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v3.x.x/dist/alpine.min.js" defer></script>

或者，通过Skypack：

从“ https://cdn.skypack.dev/alpinejs”导入alpinejs;

我们将使用x-data管理Alpine.js组件中的输入状态（模糊状态和错误消息）。一个函数定义了组件数据：

 alpine.data（“形式”，表格）;
Alpine.start（）;

功能表格（）{
  返回 {
    用户名：{errormessage：''，模糊：false}，
    电子邮件：{errormessage：''，模糊：false}，
    密码：{errormessage：''，模糊：false}，
    passwordConf：{errormessage：''，模糊：false}，
    // ...（函数将在稍后添加）...
  };
}

x-bind:class有条件地添加“无效”类：

<input type="text" name="username" x-bind:class="{ 'invalid': username.errorMessage && username.blurred }" ...>

对输入变化做出反应

事件听众更新组件的状态：

 // ...在“形式”功能中...
模糊：功能（event）{
  令ele = event.target;
  这个[ele.name] .blurred = true;
  令规则= json.parse（ele.dataset.rules）;
  此[ele.name] .errormessage = this.getErrormessage（ele.value，ulue）;
}，，
输入：功能（事件）{
  令ele = event.target;
  令规则= json.parse（ele.dataset.rules）;
  此[ele.name] .errormessage = this.getErrormessage（ele.value，ulue）;
}，，
geterrormessage：函数（值，规则）{
  令Isvalid = iodine.is（value，ulues）;
  如果（iSvalid！== true）{
    返回iodine.geterrormessage（Isvalid）;
  }
  返回 '​​';
}，，
// ...

错误消息是使用x-show和x-text显示的：

<p x-show="username.errorMessage && username.blurred" x-text="username.errorMessage"></p>

@submit事件处理程序（在高山组件中）处理表单提交：

提交：功能（事件）{
  让输入= [...this。$ el.querySelectorall（“输入[数据规则）”）;
  inputs.map（（输入）=> {
    if（iodine.is（input.value，json.parse（input.dataset.rules））！== true）{
      event.preventDefault（）;
    }
  }）;
}

服务器端错误处理

要处理服务器端错误，我们将将它们存储在data-server-errors属性中，并使用x-init填充组件的状态：

<input type="text" name="username" data-server-errors='["Username already exists"]' ...>

高山组件中的init功能将处理以下操作：

 init：function（）{
  this.InputElements = [...this。$ el.querySelectorall（“输入[数据符号]”）];
  this.initdomdata（）;
}，，
initdomData：function（）{
  this.inputelements.map（（Ele）=> {
    这个[ele.name] = {
      服务器：
      模糊：错误
    };
  }）;
}

更新了getErrorMessage功能以确定服务器错误：

 getErrormessage：功能（ele）{
  if（this [ele.name] .servererrors.length> 0）{
    返回此[Ele.name] .Servererrors [0];
  }
  // ...（其余函数在很大程度上保持不变）...
}

处理相互依存的输入

对于相互依存的输入（例如，密码确认），我们将在每个输入更改上更新所有错误消息。碘的addRule方法创建了一个自定义规则：

 iodine.Addrule（
  “匹配password”，
  value => value === document.getElementById（“密码”）。值
）；
iodine.messages.MatchingPassword =“密码确认需要匹配密码”；

updateErrorMessages功能处理以下操作：

 updateerrormessages：function（）{
  this.inputelements.map（（Ele）=> {
    这个[ele.name] .errormessage = this.getErrormessage（ele）;
  }）;
}，，

getErrorMessage功能被完善，仅在输入模糊时返回消息：

 getErrormessage：功能（ele）{
  // ...（服务器错误检查）...
  const error = iodine.is（ele.value，json.parse（ele.dataset.rules））;
  if（error！== true && this [ele.name] .blurred）{
    返回iodine.geterrormessage（错误）;
  }
  返回 ””;
}

事件侦听器使用focusout而不是blur移动到父元素元素：

...

最后，为视觉反馈添加了淡入淡出的过渡：

<p x-show="username.errorMessage" x-text="username.errorMessage" x-transition:enter=""></p>

这导致了一种反应性，可重复使用和有效的形式验证解决方案。提供的form函数可以通过相应地配置HTML属性来重复使用多种形式。

以上是使用Alpine.js和iodine.js轻巧验证的详细内容。更多信息请关注PHP中文网其他相关文章！