npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ignorance/vue-validator

v0.0.50

Published

vue plugin for form validate

Downloads

72

Readme

vue-validator

license Coveralls npm NPM downloads

一个 VUE 表单校验插件.

The library that based vue-validator can be shared to the vue-validator platform

特色

  1. 与 UI 组件库解耦,只提供最纯粹的校验功能(使用者可以自己选择使用校验结果来实现自己想要的功能)
  2. 配置约定,通过配置来定义表单的校验规则。实现表单校验与业务逻辑解耦
  3. 校验规则支持默认规则、正则表达式、校验函数
  4. 支持扩展默认的规则。(通过 extendRegexp 扩展正则规则,通过 extendValidator 扩展校验函数)
  5. 支持单个表单元素校验。(校验信息通过调用 $verify(<name>) 来获取)
  6. 支持提交时,校验不通过则自动拦截提交操作(可配置,通过 v-validate 指令的修饰符 autoCatch 来自动拦截提交)

安装

npm install @ignorance/vue-validator --save-dev

使用

// main.js
import validator from '@ignorance/vue-validator'
// ...
Vue.use(validator)
<template>
  <form ref="myForm">
    <input placeholder="姓名" v-model="formData.name" name="name" :class="{ error: $isError('name') }" />
    <input placeholder="电话" v-model="formData.tel" name="tel" :class="{ error: $isError('tel') }" />
    <select name="habit" v-model="formData.habit" :class="{ error: $isError('habit') }">
      <option value="">空</option>
      <option value="1">睡觉</option>
      <option value="2">打豆豆</option>
      <option value="3">错误选项</option>
    </select>
    <OwnerBtn text="保存" v-validate:submit.autoCatch="validateData" />
   
    姓名:{{ JSON.parse(JSON.stringify($verify('name'))) }}
    手机:{{ JSON.parse(JSON.stringify($verify('tel'))) }}
    爱好:{{ JSON.parse(JSON.stringify($verify('habit'))) }}
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        tel: '',
        habit: ''
      }
    }
  },
  created() {
    // 传给校验插件的配置信息
    this.validateData = {
      ref: 'myForm',
      formData: 'formData',
      fields: [ 'name', 'tel', 'habit' ],
      rules: {
        name: [
          {
            validator: 'required',
            msg: '必填'
          },
          {
            validator: /^[a-zA-Z]+$/,
            msg: '只接受字母'
          },
          {
            validator: 'max:8 min:5',
            msg: '长度在 5 ~ 8 之间'
          }
        ],
        tel: [
          {
            validator: 'mobile',
            msg: '请输入正确的手机号码',
            trigger: 'input' // 可以省略,默认在 blur 时校验
          }
        ],
        habit: [
          {
            validator: 'required',
            msg: '必填'
          },
          {
            validator: val => val === '1' || val === '2' // 自定义校验函数
          }
        ]
      }
    }
  },
  methods: {
    submit() {
      const res = this.$refs.myForm.validator()
      console.log('执行 submit 方法')
    }
  }
}
</script>

<style scoped>
.error {
  color: red;
  border-color: red;
}
</style>

API

rules.extendRegexp()

扩展正则表达式规则

import validator, { rules } from '@ignorance/vue-validator'

rules.extendRegexp({
  ruleName: regexp,
  // ...
})

rules.extendValidator()

扩展自定义校验规则

import validator, { rules } from '@ignorance/vue-validator'

rules.extendValidator({
  ruleName: validator,
  // ...
})

$isError()

原型方法:校验某字段是否校验不通过。

<template>
  <input name="mobile" :class="{ error: $isError('mobile') }" />
</template>

$verify()

原型方法:校验某字段是否校验信息(包含校验是否通过、不通过的提示信息)。

$verify('mobile')
// { valid: false, msg: '请输入正确的手机号码' }

formRef.validator()

表单引用对象上的校验方法(用于在提交时作整体校验)

function submit() {
  const { valid, msg } = this.$refs.myForm.validator()
  if (valid) {
    // do something
  } else {
    alert(msg)
  }
}