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

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:

Name *

Email

Submit

scriptdata(){

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

示例：

使用scope template

Success

Name is a required field

Error message B

vue-form Validators

默认自带验证类型type="email"

type="url"

type="number"

required

minlength

maxlength

pattern

min (for type="number")

max (for type="number")

使用方法

自定义验证

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

全部注册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)]

局部注册

// ...

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);

});

}

}重置验证

resetState: function () {

this.formstate._reset();

// or

this.$refs.form.reset();

}

未完待续.....