Parsley.js 速查表 | Cheat Sheet

本文根据 Devhints / Parsley.js 翻译。代码示例及版本范围沿用原文。原文标注更新日期：2018-12-06。

Parsley 提供前端表单验证。

Parsley

通过 NPM 安装

npm install --save parsleyjs

parsleyjs 即 Parsley 表单验证器。（“parsley”是另一个不同的软件包）

启用

通过 HTML

<form data-parsley-validate>
<!-- ✗ not preferred -->

通过 JavaScript

$('#form').parsley(/* options */)

建议显式调用 $.fn.parsley().

API

表单

$('#myform').parsley()
  .isValid()  // → true | null
  .validate()
  .reset()
  .destroy()

输入

$('#myform input').parsley()
  .isValid()
  .validate() // returns errors

验证器

<input ...>

必填

  required

类型

  type='email'

  type='url'
  data-parsley-type='url'

长度

  maxlength='6'
  data-parsley-maxlength='6'
  minlength='10'
  data-parsley-minlength='10'

数值型

  pattern='\d+'
  data-parsley-pattern='\d+'

  type='number'
  data-parsley-type='number'
  data-parsley-type='integer'
  data-parsley-type='digits'
  data-parsley-type='alphanum'

范围

  type='range'
  data-parsley=range='[6, 10]'

  max='10'
  data-parsley-max='10'
  min='6'
  data-parsley-min='6'

复选框

  data-parsley-mincheck='1'
  data-parsley-maxcheck='3'
  data-parsley-check='[1, 3]'

确认

  data-parsley-equalto='#confirm'

选项

表单选项

// Supported & excluded inputs by default
  inputs: 'input, textarea, select'
  excluded: 'input[type=button], input[type=submit], input[type=reset], input[type=hidden]'

// Stop validating field on highest priority failing constraint
  priorityEnabled: true

参见：选项

字段选项

// identifier used to group together inputs
// (e.g. radio buttons…)
  multiple: null

// identifier (or array of identifiers) used to
// validate only a select group of inputs
  group: null

这些选项仅适用于字段。

UI 选项

// Enable/disable error messages
  uiEnabled: true

// Key events threshold before validation
  validationThreshold: 3

// Focused field on form validation error. ‘first’|’last’|’none’
  focus: 'first'

// $.Event() that will trigger validation. eg: keyup, change…
  trigger: false

// Class that would be added on every failing validation
// Parsley field
  errorClass: 'parsley-error'
  successClass: 'parsley-success'

// Return the $element that will receive these above
// success or error classes. Could also be (and given
// directly from DOM) a valid selector like '#div'
  classHandler: function (ParsleyField) {}

// Return the $element where errors will be appended.
// Could also be (and given directly from DOM) a valid
// selector like '#div'
  errorsContainer: function (ParsleyField) {}

// ul elem that would receive errors’ list
  errorsWrapper: '<ul class="parsley-errors-list"></ul>'

// li elem that would receive error message
  errorTemplate: '<li></li>'

示例

自定义容器

$('[data-parsley]').parsley({
  errorsContainer (field) {
    return field.$element.closest('.block, .control')
  }
})

将错误信息附加到最近的 .block 或 .control.

自定义标记

$('[data-parsley]').parsley({
  errorClass: '-error',
  successClass: '-success',

  errorsWrapper: '<ul class="parsley-error-list"></ul>',
  errorTemplate: '<li class="parsley-error"></li>'
})

使用自定义标记。

自定义字段

$('[data-parsley]').parsley({
  classHandler (field) {
    const $parent = field.$element.closest('.input-group')
    if ($parent.length) return $parent

    return field.$element
  }
})

应用 errorClass 以及 successClass 到最近的 .input-group（如果存在）。

自定义验证器

HTML

<input type='text' data-parsley-multiple-of='3' />

JavaScript

window.Parsley
  .addValidator('multipleOf', {
    // string | number | integer | date | regexp | boolean
    requirementType: 'integer',

    // validateString | validateDate | validateMultiple
    validateNumber (value, requirement) {
      return 0 === value % requirement
    },

    messages: {
      en: 'This value should be a multiple of %s'
    }
  })

参见：自定义验证器

另请参阅

Parsley 文档 (parsleyjs.org)