vue-form（vue表单验证插件 vue2.2+） 使用指南

vue-form 是一个在vue 中用于表单验证的插件 目前版本为4.1.1 ??Form validation for?Vue.js 2.2+

官网地址：https://github.com/fergaldoyle/vue-form

1.安装

import VueForm from 'vue-form'; 

// install globally 

Vue.use(VueForm);

Vue.use(VueForm, options); 

// or use the mixin ... 

mixins: [VueForm]

... 

mixins: [new VueForm(options)] 

...

2.案例
使用bootstrap样式的案例?https://jsfiddle.net/fergal_doyle/zfqt4yhq/
密码验证的案例https://jsfiddle.net/fergal_doyle/9rn5kLkw/
3.使用方法
template:

  <vue-form :state="formstate" @submit.prevent="onSubmit">



    <validate tag="label">

      <span>Name *</span>

      <input v-model="model.name" required name="name" />



      <field-messages name="name">

        <div>Success!</div>

        <div slot="required">Name is a required field</div>

      </field-messages>

    </validate>



    <validate tag="label">

      <span>Email</span>

      <input v-model="model.email" name="email" type="email" required />



      <field-messages name="email">

        <div slot="required">Email is a required field</div>

        <div slot="email">Email is not valid</div>

      </field-messages>

    </validate>



    <button type="submit">Submit</button>

  </vue-form>

script

data(){

    return{ 

        formstate: {},

        model: { name: '', email: 'invalid-email' } }, 

    } 

methods: { 

    onSubmit: function () { 

        if(this.formstate.$invalid) { 

        // alert user and exit early

            return; 

        } 

        // otherwise submit form 

    }

}

vue 中可直接通过FormData的方式提交数据 要获取该表单的所有数据 可给vue-form 添加ref属性来获取?let def = this.$refs.sendinfo.$el;

验证信 息显示
该插件使用field-messages标签来定义验证正确和错误的文字或其他形式的提示内容
show 表示表单在何种状态下开始验证 vue-form 内置有$dirty,?$dirty && $touched,?$dirty || $touched,?$touched || $submitted
示例：

<field-messages name="name" show="$dirty && $touched">

  <div slot="errorKeyA">Error message A</div>

  <div slot="errorKeyB">Error message B</div>

</field-messages>

使用scope template

<field-messages name="fieldName">

  <span>Success</span>

  <template slot="required" scope="state">

    <span v-if="state.$touched || state.$submitted">Name is a required field</span>

  </template>

  <template slot="errorKeyB" scope="state">

    <span v-if="state.$touched || state.$dirty">Error message B</span>

  </template>

</field-messages>

vue-form Validators
默认自带验证类型

type="email"

type="url"

type="number"

required

minlength

maxlength

pattern

min (for type="number")

max (for type="number")

使用方法

<!-- static validators -->

<validate>

  <input type="email" name="email" v-model="model.email" required />

</validate>

<validate>

  <input type="text" name="name" v-model="model.name" maxlength="25" minlength="5" />

</validate>



<!-- bound validators -->

<validate>

  <input type="email" name="email" v-model="model.email" :required="isRequired" />

</validate>

<validate>

  <input type="text" name="name" v-model="model.name" :maxlength="maxLen" :minlength="minLen" />

</validate>

自定义验证
你可以全局或者局部注册自定义验证
全部注册

var options = {

  validators: {

    'my-custom-validator': function (value, attrValue, vnode) {

      // return true to set input as $valid, false to set as $invalid

      return value === 'custom';

    }

  }

}



Vue.use(VueForm, options);

// or

mixins: [new VueForm(options)]

<validate>

  <input v-model="something" name="something" my-custom-validator />

</validate>

局部注册

<validate :custom="{customValidator: customValidator}">

  <input v-model="something" name="something" />

</validate>

// ...

methods: {

	customValidator: function (value) {

		// return true to set input as $valid, false to set as $invalid

		return value === 'custom';

	}

}

// ...

Async 验证

methods: {

  debounced: _.debounce(function (value, resolve, reject) {

    fetch('https://httpbin.org/get').then(function(response){

      resolve(response.isValid);

    });

  }, 500),

  customValidator (value) {

    return new Promise((resolve, reject) => {

      this.debounced(value, resolve, reject);

    });

  }

}

重置验证

<vue-form ref="form" :state="formstate">



resetState: function () {

  this.formstate._reset();

  // or

  this.$refs.form.reset();

}

未完待续.....