Parsley.js 表单验证库基础教程：简单表单验证示例解析

芮妍娉Keaton

于 2025-06-04 09:20:06 发布

阅读量223

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00474/article/details/148419263

Parsley.js 表单验证库基础教程：简单表单验证示例解析

Parsley.js Validate your forms, frontend, without writing a single line of javascript 项目地址: https://gitcode.com/gh_mirrors/pa/Parsley.js

什么是 Parsley.js

Parsley.js 是一个轻量级但功能强大的前端表单验证库，它可以帮助开发者快速实现客户端表单验证功能。这个库的主要特点是：

声明式验证：通过 HTML 数据属性(data-*)配置验证规则
无依赖：可以独立运行，不需要其他库支持
高度可定制：支持自定义验证规则和错误消息
响应式设计：适配各种屏幕尺寸

简单表单验证示例解析

让我们通过一个简单的表单验证示例来了解 Parsley.js 的基本用法。

表单结构

示例中定义了一个包含多种输入类型的表单：

<form id="demo-form" data-parsley-validate>
  <!-- 各种表单字段 -->
</form>

关键点在于 data-parsley-validate 属性，它告诉 Parsley.js 需要验证这个表单。

必填字段验证

<input type="text" class="form-control" name="fullname" required />

required 属性表示这是一个必填字段，如果用户没有填写，Parsley.js 会自动显示错误提示。

电子邮件验证

<input type="email" class="form-control" name="email" 
       data-parsley-trigger="change" required />

这里有几个要点：

type="email" 会自动验证电子邮件格式
data-parsley-trigger="change" 表示在字段内容改变时触发验证
required 表示这是必填字段

单选按钮验证

<input type="radio" name="contactMethod" id="contactMethodEmail" value="Email" required />
<input type="radio" name="contactMethod" id="contactMethodPhone" value="Phone" />

对于单选按钮组，只需要在其中一个选项上添加 required 属性即可确保用户必须选择一项。

复选框组验证

<input type="checkbox" name="hobbies[]" id="hobby1" value="ski" data-parsley-mincheck="2" />

data-parsley-mincheck="2" 表示用户至少需要选择 2 个选项。这是一个典型的"至少选择N项"的场景验证。

下拉选择框验证

<select id="heard" required>
  <option value="">Choose..</option>
  <!-- 其他选项 -->
</select>

通过 required 属性确保用户必须选择一个非空值。

文本区域验证

<textarea id="message" class="form-control" name="message" 
          data-parsley-trigger="keyup" 
          data-parsley-minlength="20" 
          data-parsley-maxlength="100"
          data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment.."
          data-parsley-validation-threshold="10"></textarea>

这个文本区域验证配置了：

实时验证(keyup 事件触发)
最小长度 20 字符
最大长度 100 字符
自定义错误消息
验证阈值(输入超过 10 个字符才开始验证)

JavaScript 初始化代码

$(function () {
  $('#demo-form').parsley().on('field:validated', function() {
    var ok = $('.parsley-error').length === 0;
    $('.bs-callout-info').toggleClass('hidden', !ok);
    $('.bs-callout-warning').toggleClass('hidden', ok);
  })
  .on('form:submit', function() {
    return false; // Don't submit form for this demo
  });
});

这段代码做了三件事：

初始化表单验证
监听字段验证事件，根据验证结果显示/隐藏提示信息
阻止表单实际提交(仅用于演示)

样式定制

示例中也展示了如何自定义验证成功和失败的样式：

p.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}
p.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}