npm 包 @pile-ui/validator 使用教程

简介

@pile-ui/validator 是一个基于 validator.js 的表单验证工具包,专门为前端开发人员设计,可以轻松地进行表单验证,节省时间和精力。

安装

使用 npm 安装 @pile-ui/validator

--- ------- ------------------

使用

引入

------ --------- ---- ---------------------

API

@pile-ui/validator 提供了一系列 API 用于表单验证:

validate(rules, values[, messages])

---
 - --------
 -
 - ------ -------- ----- - ----
 - ------ -------- ------ - -------
 - ------ -------- ---------- - ------
 - -------- -------- - ------------------
 --
------------------------- ------- ----------
  • rules - 表单验证规则。
  • values - 要验证的表单数据。
  • messages - 验证错误消息。
------ --------- ---- ---------------------

----- ----- - -
  ----- -
    --------- -----
    ----- ---------
    ---------- --
    ---------- ---
  --
  ------ -
    --------- -----
    ----- --------
  --
  ---- -
    --------- -----
    ----- ---------
    ---- --
    ---- ----
  --
--

----- ------ - -
  ----- ---
  ------ ---
  ---- ---
--

----- -------- - -
  ---------------- --------
  ------------ ---------
  ----------------- --------- ---
  ----------------- --------- ----
  ----------------- --------
  ------------- ---------
  --------------- --------
  ----------- ---------
  ---------- ------- ---
  ---------- ------- -----
--

----- ------ - ------------------------- ------- ----------

--------------------

addMethod(name, fn)

---
 - -----------
 -
 - ------ -------- ---- - ----------
 - ------ ---------- -- - -----------
 --
------------------------- ----
  • name - 自定义的验证规则方法名。
  • fn - 自定义的验证规则方法函数。
------ --------- ---- ---------------------

------------------------------ ------- ------ -- -
  ------ ----- --- ------
---

----- ----- - -
  --------- -
    --------- -----
  --
  ---------------- -
    --------- -----
    -------- ------------
  --
--

----- ------ - -
  --------- ---------
  ---------------- ---------
--

----- -------- - -
  -------------------- --------
  --------------------------- ----------
  -------------------------- -------------
--

----- ------ - ------------------------- ------- ----------

--------------------

defaultMessage

@pile-ui/validator 提供了一些默认的错误消息,可以通过覆盖这些错误消息,来自定义验证错误消息,这些默认的错误消息如下所示:

-
  --------- ----------
  ------ ---------
  ---- ---- --------
  ------- ----------
  -------- ----------
  ------ -----------
  ------------- --------------
  ----- --------------------
  ---------- --------- -------------
  ---------- --------- -------------
  ---- ------- -------
  ---- ------- -------
  -------- ---------
  -------- ---------
-

可以通过以下方式覆盖默认消息:

------ --------- ---- ---------------------

--------------------------------- - ---------
------------------------------ - -------------

示例

------ --------- ---- ---------------------

------------------------------ ------- ------ -- -
  ------ ----- --- ------
---

--------------------------------- - ---------
------------------------------ - -------------

----- ----- - -
  ----- -
    --------- -----
    ----- ---------
    ---------- --
    ---------- ---
  --
  ------ -
    --------- -----
    ----- --------
  --
  --------- -
    --------- -----
    ---------- --
  --
  ---------------- -
    --------- -----
    -------- ------------
  --
--

----- ------ - -
  ----- ---
  ------ ---
  --------- ---
  ---------------- ---
--

----- ------ - ------------------------- --------

--------------------

结语

@pile-ui/validator 是一个非常实用的表单验证工具包,可以大大地提高前端开发人员的开发效率,希望开发人员可以善加利用。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600672683660cf7123b36698


猜你喜欢

  • npm 包 yivue-example 使用教程

    引言 如果你是一名前端开发工程师,那么你肯定知道 npm,它是一个很优秀的包管理器,帮助我们管理和使用大量的第三方库。对于 Vue 开发来说,我们这里要介绍的就是一个非常有用的 npm 包:yivue...

    4 年前
  • npm 包 & vscc-demo 使用教程

    在前端开发中,我们经常需要处理各种不同的数据格式和结构,这时候我们可以使用 vscc-demo 这个 npm 包来操作和处理这些数据。本文将详细介绍 npm 包 vscc-demo 的使用方法和示例。

    4 年前
  • npm 包 uxcore-test1 使用教程

    前言 随着前端技术的不断发展,维护、测试和开发变得越来越困难,如何快速提高开发效率?如何保证软件质量?这些问题成为了我们必须面对的挑战。 npm(Node Package Manager) 作为世界上...

    4 年前
  • npm包YiVue使用教程

    什么是YiVue YiVue是一个基于Vue.js的组件库,它包含了一些非常有用的组件和工具,可以帮助你快速构建现代化的Web应用程序。YiVue的组件和工具非常易于使用和定制,使得前端应用程序开发变...

    4 年前
  • npm 包 react-native-store-rating 使用教程

    在开发 React Native 应用时,我们经常需要集成第三方模块,例如各种 UI 组件和工具库。其中一个非常重要的模块是应用内评分模块,可以帮助我们提高用户参与度和应用用户留存率。

    4 年前
  • npm 包 sina-weibo 使用教程

    在前端开发中,我们经常需要使用社交媒体平台的 API 来获取数据或者与用户进行交互。其中,新浪微博的 API 较为常用。为了方便开发者使用,已经有人封装了一个 sina-weibo 的 npm 包。

    4 年前
  • npm 包 react-table-generator 使用教程

    前端开发中,表格是常见的组件之一。在处理表格数据的过程中,我们通常会使用到一些类似于 react-table-generator 这样的 npm 包来提升开发效率。

    4 年前
  • npm 包 h-naya-mobile 使用教程

    简介 h-naya-mobile 是一个轻量、易用的移动端组件库,包含了丰富的移动端组件,例如 button、dialog、toast 等。在使用 h-naya-mobile 之前,你需要先安装 No...

    4 年前
  • npm 包 h-naya-wechat-app 使用教程

    在开发微信小程序时,我们常常会需要调用各种微信开放接口来实现丰富的功能。而 h-naya-wechat-app 就是一个可以帮助我们快速完成小程序开发的 npm 包,它提供了许多常用的微信开放接口的封...

    4 年前
  • npm 包 h-naya-request 使用教程

    前言 在现代 Web 开发中,前端技术已经成为了一个不可或缺的部分。而 npm 则是前端开发的重要工具之一。其中,h-naya-request 是一个常用的 npm 包,用于前端中发送各种 HTTP ...

    4 年前
  • npm 包 h-naya-web 使用教程

    简介 h-naya-web 是一个基于 Vue.js 的前端 UI 组件库,拥有众多常用的 UI 组件,如按钮、表单、布局等,并支持主题定制。 安装 在项目目录下执行以下命令: --- -------...

    4 年前
  • npm 包 h-naya-redux 使用教程

    在前端开发中,状态管理在大型项目中是非常重要的。Redux 是一个非常流行的状态管理库,它允许我们将应用程序的状态存储在单一的地方,从而方便跟踪和管理状态。如果您正在寻找一种简单但强大的方法来管理应用...

    4 年前
  • npm 包 use-state-epic 使用教程

    背景 在前端开发中,状态管理是一个非常重要的概念,而 React 是一个非常流行的前端框架之一,它提供了 useState Hook 用于管理组件的状态。但当应用的状态比较复杂时,仅使用 useSta...

    4 年前
  • npm包react-phone-number-input-mui的使用教程

    在现代网页应用程序中,电话号码输入是非常常见的。然而,在处理电话号码输入时,我们会遇到各种各样的问题。比如,通常人们习惯输入电话号码的方式不统一,导致客户端难以处理输入的电话号码。

    4 年前
  • npm 包 h-naya-wechat-web 使用教程

    h-naya-wechat-web 是一款非常有价值的 npm 包,它为前端开发者提供了一种高效的调用微信网页授权接口的方法。在本篇文章中,我们将为大家提供一份详尽的 h-naya-wechat-we...

    4 年前
  • npm 包 grapesjs_codeapps 使用教程

    背景介绍 前端开发工作中,我们经常需要寻找各种开源工具和库来提高生产效率。在这些工具和库中,npm 包几乎是必不可少的一部分。npm 包提供了丰富多样的工具和库,可以满足我们各种需求。

    4 年前
  • npm 包 shb-vue-upload 使用教程

    前言 在进行前端开发时,文件上传是一个非常常见的需求。而 shb-vue-upload 这个 npm 包可以很好地帮助我们完成文件上传的过程。下面将详细介绍如何使用该 npm 包。

    4 年前
  • npm包uxcore-test2的使用教程

    介绍 npm包uxcore-test2是一个基于React框架的UI组件库,主要用于前端Web应用的开发和构建。 此教程将会介绍如何使用npm包uxcore-test2来构建前端Web应用,包括如何安...

    4 年前
  • npm 包 mifan-ui-kit 使用教程

    在前端开发中,UI 组件库是不可或缺的,能够提高开发效率和用户体验。mifan-ui-kit 是一个基于 Vue.js 的 UI 组件库,其提供了丰富的组件和风格,支持自定义主题,非常适合构建中后台管...

    4 年前
  • npm 包 react-native-spinkit-web 使用教程

    简介 react-native-spinkit-web 是一个 React Native 的轻量级动画库,能够为页面增加各种美观的旋转效果。本文将介绍如何使用 react-native-spinkit...

    4 年前

相关推荐

    暂无文章