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 *
Success!
Name is a required field
Email
Email is a required field
Email is not valid
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
示例：
Error message A
Error message B
使用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();
}
未完待续.....
