一个 VUE 表单校验插件

Overview

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)
  }
}
You might also like...
Vue form components with server-side validation in mind
Vue form components with server-side validation in mind

Vue form components with server side validation in mind About FormVuelar is a set of predefined vue form components which are designed to automaticall

A simple way to handle Laravel back-end validation in Vue 2.
A simple way to handle Laravel back-end validation in Vue 2.

vform A simple way to handle Laravel back-end validation in Vue. Inspired from Laravel Spark. Installation npm i axios vform Usage See the included ex

Vue data validation rules, very much inspired from Laravel validation

A Vue plugin that provides out-of-the-box data validation rules, very much inspired from Laravel validation system. Installation npm i @primitivesocia

Simple, lightweight model-based validation for Vue.js
Simple, lightweight model-based validation for Vue.js

Simple, lightweight model-based validation for Vue.js

方便你在 element-ui 项目中使用 vue-formulate 的一个插件
方便你在 element-ui 项目中使用 vue-formulate 的一个插件

formulate-el-ui 本项目为 vueformulate 项目加上了 element-ui 皮肤,可以让你在 element-ui 项目中使用 vueformulate 时保持风格统一 关于 element-ui 中的 el-form 和 vueformulate 包的功能比较,我写了一篇

Vue 3 Hooks for consuming, validating and managing Forms.

@casthub/form provides Vue 3 Hooks for consuming, validating and managing Forms.

A dependency-free Vue plugin for formatting and validating credit card form fields.

A dependency-free Vue plugin for formatting and validating credit card form fields.

Vue props validation logic extracted for nested validation in object and arrays.

vue-props-validation Vue props validation logic extracted for nested validation in object and arrays. Install npm install vue-props-validation Usage Y

Vue composition function for Form Validation

Form Validation for Vue 3 Vue composition function for Form Validation with async rules. 🌌 Written in TypeScript 🌊 Dynamic Form support 🍂 Light wei

Owner
null
Vue validation components is a Vue component combined with vee-validate

vue-validation-components Vue validation components is a Vue component combined with vee-validate.

Fajarullah 0 Jan 18, 2021
✅ Form Validation for Vue.js

vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or u

Abdelrahman Awad 9.5k Jan 1, 2023
RawModel.js plugin for Vue.js v2. Form validation has never been easier!

vue-rawmodel RawModel.js plugin for Vue.js v2. Form validation has never been easier! This plugin integrates RawModel.js framework into your Vue.js ap

Kristijan Sedlak 81 Nov 24, 2022
Simple, lightweight model-based validation for Vue.js

vuelidate Simple, lightweight model-based validation for Vue.js Sponsors Gold Silver Bronze Features & characteristics: Model based Decoupled from tem

Vuelidate 6.5k Jan 4, 2023
A simple yet flexible validator library for vue.js

Simple Vue Validator Simple Vue validator is a lightweight yet flexible plugin for Vue.js 2.0 that allows you to validate input fields, and display er

semisleep 294 Dec 27, 2022
Vue.js 2 form component that integrates jQuery Validation and Axios.

vue-vform Vue.js 2 form component that integrates jQuery Validation and Axios. Install Yarn yarn add vue-vform --dev NPM npm install vue-vform --save-

Jose Quintana 15 Nov 24, 2022
Form validation for Vue.js 2.2+

vue-form Form validation for Vue.js 2.2+ Install Available through npm as vue-form. import VueForm from 'vue-form'; // or var VueForm = require('vue-f

null 617 Dec 18, 2022
Simple package to display error in vue from laravel validation

Laravel Vue Validator By bubbleflat.com This package allow to display errors from laravel validation rules ! This package needs vue-resource to work !

Valentin Vivies 32 Sep 20, 2020
Vue data validator - Easiness, simplicity, accurate

Overview This is a Vue data validator, trying to cover all needs and built on top of ES6 to achieve the best architecture. Demo You can view a demo an

null 30 Dec 8, 2021
A small utility written in Vue that checks if the given password has been leaked against the Have I Been Pwned API.

Introduction Troy Hunt has repeatedly made a wonderful job keeping up with good security measures regarding personal data, more specificaly making the

Kana 35 Nov 17, 2022