使用 Parsley.js 验证表单

在本教程中，我们将向您展示如何使用 Parsley.js，这是一个 JavaScript 库，主要是用于验证表单。 Parsley 有助于以一种非常微妙和简单的方式验证表单，它是广泛使用的表单验证库之一。

Parsley.js 的功能

有很多理由可以说明为什么 Parsley 是验证 JavaScript 表单的不错选择。下面提到了其中一些。

• 直观的 DOM API - DOM API 允许您在 HTML 标记中使用简单的英语，Parsley 将完成剩下的工作。即使对于简单的表单验证，您也无需编写一行 JavaScript。

• 动态表单验证 - Parsley 可以轻松检测表单修改并相应地适应其验证。

• 大量验证器 - 欧芹中存在大量内置验证器。如果需要，我们还可以使用 Ajax 验证器。

• 高度可靠 - 它没有错误，并且也经过严格测试。

• 以用户体验为中心 - Parsley 专注于 UI 和 UX，我们甚至可以覆盖 Parsley 的几乎所有默认行为来满足您的确切需求。

如何使用 Parsley 验证表单

现在我们对 Parsley.js 有了一些了解，现在是时候我们关注一个使用 Parsley 的示例了。考虑以下“index.html”文件，其中我们有一个表单，其中嵌入了简单的 JavaScript 代码。

示例

index.html

   
   
   
   
   
   
   
   
   



   
Fill in the form and click the validate button at the bottom
   

   Enter Your Full Name * :
   
   


   Enter Your Email * :
   
   


   Please Enter Your Preferred Contact Method*: Email:  Phone: 
   


   Enter Your Hobbies (Optional, but 2 minimum):
   

      Coding 
 Walking 
 Eating 
 Sleeping 
 Traveling 
 Writing 

   

      Heard about us via *:
      
         Choose..
         Press
         Internet
         Word of mouth
         Other..
      
   
   

      Message (20 chars min, 100 max) :
      
   
   

   
   
   

单击顶部的“编辑并运行”按钮运行此代码并查看输出表单。

说明

在此代码中，我们有一个表单，其中有多个需要不同值的文本区域。在每个值中，我们都有一个文本关键字、一个复选框或一个选项。

此外，代码末尾有一个“验证”按钮。当您在未填写任何表单的情况下单击该按钮时，您将从 Parsley 收到弹出错误，而当您输入的某些字段不符合他们的预期时，您将从 Parsley.js 收到验证错误。

您可以在此处运行此代码，然后根据您选择的测试目的填写不同的字段。

结论

在本教程中，我们使用一个简单的示例来演示如何使用 Parsley.js 验证 JavaScript 中的表单。

以上是使用 Parsley.js 验证表单的详细内容。更多信息请关注PHP中文网其他相关文章！