vue-form-data Vue表单组件,能够在数据层验证,没有样式

Last update: Oct 12, 2017

vue-form-data

Vue表单组件,能够在数据层验证,没有样式。

Install

npm install @hezedu/vue-form

环境

peerDependencies: jade, vue-loader.

Webpack Config :本项目是未经编译的原文件。所以配置rule时不要将本顶目exclude在外。

API

引用

import validators { VForm, VInput, VSubmit } from '@hezedu/vue-form';

validators

Object, 所有验证器(系统自带一个)。可自己扩展。

例:

validators.positiveInteger = function(v){
  if(/\d+/.test(v)){ //v 为用户输入的值。
    return '请输入正整数' //错误
  }else{
    return; //正确
  }
}

components

VForm props

  • data: Object 表单数据,该对象会改变属性,请使用数据的深拷贝。
  • validate: Object 需验证的配置。key改须跟data的key对应。

例: ``vue

### VInput props
- `name`: String 必须。
- `type`: String 默认`text`
- `value`: String 非必须。通常只有当`type`为**checkbox**或**radio**时才需要填。其它填了也没用。它会自动绑定到VForm的`data[name]`。

例:
``vue

VSubmit props

success(data) Function 必须。data为用户输入后的数据。用户输入完成且全部验证都通过,点击触发,获取修改后的data

注意

VInputVSubmit的父组件必须是VForm

Css className

  • .hezedu-submit-disabled 验证未完全能过时,提交按钮.
  • .hezedu-input-validate-init 验证初始化(一开始),input.
  • .hezedu-input-validate-success 验证成功,input.
  • .hezedu-input-validate-error 验证失败,input.

完整示例:

VForm(:data='data', :validate='validate') table tr td label span * | 姓名(text): td VInput(name='name') tr td label span * | 年龄(number): td VInput(name='age' type='number') tr td label 性别(radio): td(style='width: 200px;display:flex') label VInput(name='sex' class='inline' value='1' type='radio') |男 label VInput(name='sex' class='inline' value='2' type='radio') |女 tr td label 描述(textarea): td VInput(name='textarea' class='haha' type='textarea') tr td label 兴趣(checkbox): td label VInput(name='interest' class='inline' value='1' type='checkbox') |跑步 label VInput(name='interest' class='inline' value='2' type='checkbox') |骑车 label VInput(name='interest' class='inline' value='3' type='checkbox') |写代码 tr td label span * |职业(select): td VInput(name='job' class='haha' type='select') option(value='') 请选择 option(value='1') UI option(value='2') 前端 option(value='3') 后端 hr VSubmit(:success = 'success') |submit template(scope="props" slot='process') span {{props.successTotal}} / {{props.validateTotal}} pre {{result}} ">
<style>
label>span{color: red}
.inline{display: inline-block;}
.hezedu-submit-disabled{color: #999}
.hezedu-input-validate-success>:nth-child(1){
  border-color: green;
}
.hezedu-input-validate-error>:nth-child(1){
  border-color: red;
}
.hezedu-input-validate-init>:nth-child(1){
  border-color: blue;
}
.hezedu-input-validate-success,
.hezedu-input-validate-error,
.hezedu-input-validate-init>:nth-child(2){
  color:red;
}
style>
<template lang="jade">
VForm(:data='data', :validate='validate')
  table
    tr
      td
        label
          span *
          | 姓名(text):
      td
        VInput(name='name')
    tr
      td
        label
          span *
          | 年龄(number):
      td
        VInput(name='age' type='number')
    tr
      td
        label 性别(radio):
      td(style='width: 200px;display:flex')

        label
          VInput(name='sex' class='inline' value='1' type='radio')
          |男
        label
          VInput(name='sex' class='inline' value='2' type='radio')
          |女
    tr
      td
        label 描述(textarea):
      td
        VInput(name='textarea' class='haha' type='textarea')
    tr
      td
        label 兴趣(checkbox):
      td
        label
          VInput(name='interest' class='inline' value='1' type='checkbox')
          |跑步
        label
          VInput(name='interest' class='inline' value='2' type='checkbox')
          |骑车
        label
          VInput(name='interest' class='inline' value='3' type='checkbox')
          |写代码
    tr
      td
        label
          span *
          |职业(select):
      td
        VInput(name='job' class='haha' type='select')
          option(value='') 请选择
          option(value='1') UI
          option(value='2') 前端
          option(value='3') 后端
  hr
  VSubmit(:success = 'success')
    |submit
    template(scope="props" slot='process')
      span {{props.successTotal}} / {{props.validateTotal}}
  pre {{result}}
template>

<script>
import {VForm, VInput, VSubmit, ruleExtend} from '@hezedu/vue-form';

export default {
  components: {
    VForm,
    VInput,
    VSubmit
  },
  data(){
    return {
      data: {
        name: '',
        age: '2',
        textarea: '',
        job: '2',
        sex: '1',
        interest: ['1', '2']
      },
      validate: {
        name: 'notEmpty',
        age: 'notEmpty',
        job: 'notEmpty'
      },
      result: null
    }
  },
  methods: {
    success(data){
      this.result = data;
    }
  }
}
script>

GitHub

https://github.com/hezedu/vue-form
You might also like...

Simple Vue.js form validation library

Simple Vue.js form validation library

Mar 1, 2020

Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api

Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api

Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api. (Form Api, Validator Api, Rules Api, Error Messages Api)

Jun 25, 2022

Another validation form for the Vue. Validates input fields of multiple forms and displays errors

vue-coe-validator ✅ Another validation form for the Vue. Validates input fields of multiple forms and displays errors. Note: without any dependencies.

Jun 5, 2021

Vue Composition API for validating form.

Vue Composition API for validating form.

Jun 27, 2022

Flexible Vue.js form validation directive

Vue form validator A Vue.js directive for form validation Installation npm instal vue-smart-validator --save Getting Started In your scirpt entry poi

Nov 20, 2018

Vue.js plugin that covers the Buefy form fields for Formly.

Vue.js plugin that covers the Buefy form fields for Formly. It lets you to validate input data in your forms. The plugin combine simplicity of the Formly form builder, lightness of the Buefy form fields and impeccability of the Bulma design.

Nov 16, 2020

Form input errors and descriptions for Vue 2.

Form input errors and descriptions for Vue 2.

Feb 15, 2017

Simple and easy Vue directive for form validation.

Simple and easy Vue directive for form validation.

Simple and easy Vue.js directive for form validation.

Feb 15, 2021

Deadly simple form validation for Vue.js

vue-form-validator Deadly simple form validation for Vue.js. Features: Built in data types, including email, number, domain, url, etc. Customizable va

Aug 28, 2018
Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data

Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data. #install npm i vue-laravel-validator -

May 29, 2021
Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

May 7, 2019
✅ Form Validation for Vue.js
✅  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

Jul 4, 2022
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

Feb 3, 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-

Jul 30, 2020
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

Apr 18, 2022
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

Jun 12, 2022
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.

Jun 24, 2022
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

May 11, 2022
Results of small 30 min online coding challenge + small polishing afterwards. Vue JS login form + Express JS login endpoint with CORS middleware and validation of request

Install dependencies: npm -i install Start FE: npm run serve ./frontend/src/main.js Start BE: node ./backend/controller/index.js ToDo: tests docker-co

Jan 14, 2022