VeeValidate 使用笔记（此文章使用环境VUE+webpack）

VeeValidate 使用笔记

内置规则

after                两时间的先后比较 
alpha_dash    字母、数字、下划线、减号  
alpha_num     字母、数字  
alpha              字母   
before             两时间的先后比较  
between          数值范围比较  
confirmed        需要两个相同的输入值  
date_between 日期范围  
date_format     日期输入格式  
decimal            数值，允许小数  
digits                规定长度的数值  
dimensions      指定像素长宽的图形文件  
email Email      地址  
ext                    指定扩展名的文件   
image               图像类型（mime type）的文件   
in                      指定的选择项（典型运用于选择项：单选、复选等）  
ip                      IP地址  
max                  指定最大长度   
mimes        指定类型（mime type）的文件   
min                指定最小长度   
not_in               指定无效的选择项（典型运用于下拉框）   
numeric            数字（不允许小数点）  
regex                正则表达式  
required            必填项   
size                   限定文件大小，单位kb  
url                     URL地址或者域名

errors的方法：

errors.first('field')         获取关于当前field的第一个错误信息
collect('field')               获取关于当前field的所有错误信息(list)
has('field')            当前filed是否有错误(true/false)
all()                            当前表单所有错误(list)
any()                      当前表单是否有任何错误(true/false)
add(String field, String msg)  添加错误
clear()                清除错误
count()            错误数量
remove(String field)    清除指定filed的所有错误

使用方法

npm intall vee-validate -D

创建validate.js文件并在内部引用（此文件源代码在最后）

import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

在页面引入 （我的是router/index.js）

import register from '@/components/register/register';

页面使用

<div>
<label class="label" for="email">Email</label>
<p>
<input v-validate="'required|email'"  name="email" type="text" placeholder="Email">
       <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
</p>
</div>
<div>
<label class="label" for="phone">phone</label>
<p>
<input v-validate="'required|mobile'"  name="phone" type="text" placeholder="phone">
       <span v-show="errors.has('mobile')">{{ errors('en') }}</span>
</p>
</div>


自定义规则：
Validator.extend('mobile', {
    messages: {
      en:field => field + '必须是11位手机号码',
    },
    validate: value => {
      return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
    }
})
结尾附validate.js自己写的案例


form 提交
<form @submit.prevent="validateBeforeSubmit">....</form>
methods: {  
validateBeforeSubmit() {  
this.$validator.validateAll().then(() => {  
alert('From Submitted!');  
}).catch(() => { 
alert('Correct them errors!');
}); 
}  
}

多重验证：v-validate="'required|min:6|max:12'"

========================华丽分割线==========
自己写的案例validate.js源码


import Vue from 'vue'
import VeeValidate, {Validator} from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN';//引入中文文件


// 配置中文
Validator.addLocale(zh);


const config = {
  locale: 'zh_CN'
};


Vue.use(VeeValidate,config);


// 自定义validate  attributes就是 field
const dictionary = {
   zh_CN: {
      messages: {
        email: () => '请输入正确的邮箱格式',
        required: ( field )=> "请输入" + field
      },
      attributes:{
        email:'邮箱',
        password:'密码',
        name: '账号',
        mobile: '手机',
        length11:'长度'
      }
  }
};


Validator.updateDictionary(dictionary);


Validator.extend('mobile', {
  messages: {
    zh_CN:field => field + '必须是11位手机号码',
  },
  validate: value => {
    return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
});


Validator.extend('length11', {
  messages: {
    zh_CN:field => field + '必须是11位',
  },
  validate: value => {
    return value.length == 11
  }
});




在vue文件中使用


<template>
<div>
<div>
<label class="label">Email</label>
   <p>
       <input v-validate="'required|email'"  name="email" type="text" placeholder="Email">
       <span v-show="errors.has('email')">{{ errors.first('email') }}</span>
       {{errors.has('email')}}
   </p>
</div>
<div>
<label class="label">phone</label>
   <p>
       <input v-validate="'required|mobile'"  name="mobile" type="text" placeholder="mobile">
       {{errors.has('mobile')}}
       <span v-show="errors.has('mobile')">{{ errors.first('mobile') }}</span>
   </p>
</div>
<div>
<label class="label">phone</label>
   <p>
       <input v-validate="'length11'"  name="length11" type="text" placeholder="length11">
       {{errors.has('length11')}}
       <span v-show="errors.has('length11')">{{ errors.first('length11') }}</span>
   </p>
</div>
</div>
</template>



官网链接： http://vee-validate.logaretm.com/