npm 包 `vtypes-requiredwithout` 使用教程-JavaScript中文网-JavaScript教程资源分享门户

vtypes-requiredwithout 是一款针对 Vue.js 的表单验证器库。它可以用来在输入某些值时，必须同时输入另外一些值才能通过验证。本文将为大家介绍如何使用 vtypes-requiredwithout。

安装

vtypes-requiredwithout 可以通过 npm 安装:

npm install --save vtypes-requiredwithout

使用

全局引入

如果你想在全局引入 vtypes-requiredwithout，可以这样做:

import Vue from 'vue'
import VTypes from 'vtypes'
import VTypesRequiredWithout from 'vtypes-requiredwithout'

Vue.use(VTypes)
Vue.use(VTypesRequiredWithout)

局部引入

如果你想在某个组件中使用 vtypes-requiredwithout，可以这样做:

import VTypes from 'vtypes'
import VTypesRequiredWithout from 'vtypes-requiredwithout'

export default {
  components: {
    VTypesRequiredWithout
  }
}

验证规则

vtypes-requiredwithout 有一个规则：所有的必填项必须同时有值或者同时为空。这个规则可以应用于以下两个情况：

输入一个值时，必须同时输入另一个特定的值

<template>
  <div>
    <input type="text" v-model="input1" />
    <input type="text" v-model="input2" v-text-field="{ requiredWithout: input1 }" />
  </div>
</template>

这里的 requiredWithout 是一个自定义验证器，并且它依赖于 input1 的值。如果 input2 没有填入数据，但是 input1 却为有值状态，那么就会出现错误提示。

输入一个值时，必须同时输入另外一些特定的值

<template>
  <div>
    <input type="text" v-model="input1" />
    <input type="text" v-model="input2" v-text-field="{ requiredWithout: { values: ['value1', 'value2'], target: input1 } }" />
  </div>
</template>

这里的 requiredWithout 是一个自定义验证器，并且它依赖于 input1 的值和一个需填写的数组值：['value1', 'value2']。如果 input2 没有填入数据，但是在特定数组值的任何一个均在有值状态，那么就会出现错误提示。

示例代码

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

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

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

总结

vtypes-requiredwithout 是一个简单实用的 Vue.js 表单验证器库，可以帮助我们在表单输入时快速开发验证规则。希望本文可以为你使用 vtypes-requiredwithout 提供指导和帮助。

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