npm 包 aotoo-validator 使用教程

简介

aotoo-validator 是一个专门针对前端表单验证的 npm 包，它提供了丰富的验证规则和简单易用的验证方法，可以帮助开发者快速、方便地实现表单验证。

安装

aotoo-validator 可以通过 npm 进行安装，打开终端并输入以下命令：

npm install aotoo-validator --save

使用

在需要使用 aotoo-validator 的文件中 import 引入，并创建一个验证器实例：

import Validator from 'aotoo-validator'

const validator = new Validator()

在实例对象中，可以通过 addRule 方法来添加自定义验证规则，例如：

validator.addRule('username', (value, params) => {
  if (!/^[a-zA-Z0-9_-]{4,16}$/.test(value)) {
    return '用户名必须为4-16位，支持字母、数字、下划线、减号'
  }
})

在实际应用中，可以通过 validate 方法来进行验证，例如：

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

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

在上面的代码中，首先定义了一个对象 data，它包含了要验证的数据。接着通过 validate 方法对数据进行验证，第一个参数为要验证的数据，第二个参数为验证规则。第三个参数是一个回调函数，当验证完成后会调用该函数，并将错误信息和验证通过的数据作为参数传递给它。

验证规则

aotoo-validator 提供了丰富的验证规则，可以满足大部分的验证需求。

required

必选项，不能为空。

validator.validate(data, {
  name: {
    required: true
  }
}, (errors, data) => {
  // ...
})

number

数字，可以是正数、负数和小数。

validator.validate(data, {
  age: {
    number: true
  }
}, (errors, data) => {
  // ...
})

integer

整数，可以是正整数和负整数。

validator.validate(data, {
  age: {
    integer: true
  }
}, (errors, data) => {
  // ...
})

positive

正数。

validator.validate(data, {
  amount: {
    positive: true
  }
}, (errors, data) => {
  // ...
})

email

邮箱。

validator.validate(data, {
  email: {
    email: true
  }
}, (errors, data) => {
  // ...
})

url

链接。

validator.validate(data, {
  url: {
    url: true
  }
}, (errors, data) => {
  // ...
})

regex

正则表达式。

validator.validate(data, {
  code: {
    regex: /^[A-Z]+\d{3}$/
  }
}, (errors, data) => {
  // ...
})

min

最小值。

validator.validate(data, {
  age: {
    min: 18
  }
}, (errors, data) => {
  // ...
})

max

最大值。

validator.validate(data, {
  age: {
    max: 60
  }
}, (errors, data) => {
  // ...
})

minlength

最小长度。

validator.validate(data, {
  password: {
    minlength: 6
  }
}, (errors, data) => {
  // ...
})

maxlength

最大长度。

validator.validate(data, {
  password: {
    maxlength: 16
  }
}, (errors, data) => {
  // ...
})

equalto

相等。

validator.validate(data, {
  confirm: {
    equalto: 'password'
  }
}, (errors, data) => {
  // ...
})

phone

手机号码。

validator.validate(data, {
  phone: {
    phone: true
  }
}, (errors, data) => {
  // ...
})

idcard

身份证号码。

validator.validate(data, {
  idcard: {
    idcard: true
  }
}, (errors, data) => {
  // ...
})

username

用户名。

validator.validate(data, {
  username: {
    username: true
  }
}, (errors, data) => {
  // ...
})

参考示例

下面是一个完整的验证表单的示例代码：

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

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

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

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

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

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

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

在上面的示例代码中，首先创建了一个验证器实例，并添加了两个自定义验证规则。接着使用 validate 方法对表单进行验证，传入了表单的选择器和一个回调函数，如果验证失败，就将错误信息显示在表单的错误信息容器中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730881e8991b448e933f