VeeValidate

VeeValidate的使用：（表单验证插件）

　　js：

　　　　引入模块：（main或者重新创建一个单独负责验证表单的文件，然后再main中引入）

 1 import Vue from 'vue'
 2 import VeeValidate, {Validator} from 'vee-validate'
 3 import zh from 'vee-validate/dist/locale/zh_CN'
 4 Validator.addLocale(zh) // 配置语言为中文
 5 const config = {
 6   locale: 'zh_CN'
 7 }
 8 Vue.use(VeeValidate, config)
 9 const dictionary = {
10   zh_CN: {
11     messages: {
12       // 自定义不符合验证条件时的提示信息
13       required: (field) => '请输入' + field
14     },
15     attributes: {
16       // 定义需要验证条件的中文名（filed），不定义话会出现如 name是必须 的这种提示
17       email: '邮箱',
18       password: '密码',
19       name: '姓名',
20       phone: '手机'
21     }
22   }
23 }
24 Validator.updateDictionary(dictionary) // 更新配置

　　HTML：　　

1 <input type="text" name="cardId" v-model="cardId" v-validate="'required'">
<!--
* v-model: 綁定的data
* v-validate: 验证规则
* name: 验证元素名称
-->
2 <p v-show="errors.has('cardId')">{{ errors.first('cardId') }}</p>

<!--
* v-show: 符合条件时候展示
* errors.first() 获取验证信息
-->

传送门： http://vee-validate.logaretm.com/

官方定义校验：

after{target} - 比target要大的一个合法日期，格式(DD/MM/YYYY)
alpha - 只包含英文字符
alpha_dash - 可以包含英文、数字、下划线、破折号
alpha_num - 可以包含英文和数字
before:{target} - 和after相反
between:{min},{max} - 在min和max之间的数字
confirmed:{target} - 必须和target一样
date_between:{min,max} - 日期在min和max之间
date_format:{format} - 合法的format格式化日期
decimal:{decimals?} - 数字，而且是decimals进制
digits:{length} - 长度为length的数字
dimensions:{width},{height} - 符合宽高规定的图片
email - 不解释
ext:[extensions] - 后缀名
image - 图片
in:[list] - 包含在数组list内的值
ip - ipv4地址
max:{length} - 最大长度为length的字符
mimes:[list] - 文件类型
min - max相反
mot_in - in相反
numeric - 只允许数字
regex:{pattern} - 值必须符合正则pattern
required - 必选项
size:{kb} - 文件大小不超过
url:{domain?} - (指定域名的)url

自定义验证规则：（以名字为例）

const isName = {
  messages: {
    zh_CN: (field, args) => field + '不能少于两位字符'
  },
  validate: (value, args) => {
    return value.length >= 2
    // 自定义规则中必须有validate方法，或者直接定义isName为函数
  }
}
Validator.extend('name', isName)

开黑吗我亚索贼6