VeeValidate

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

　　js：

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

　　　　　　

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)
const dictionary = {
  zh_CN: {
    messages: {
      // 自定义不符合验证条件时的提示信息
      required: (field) => '请输入' + field
    },
    attributes: {
      // 定义需要验证条件的中文名（filed），不定义话会出现如 name是必须 的这种提示
      email: '邮箱',
      password: '密码',
      name: '姓名',
      phone: '手机'
    }
  }
}
Validator.updateDictionary(dictionary) // 更新配置

　　HTML：　　

　　　　

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

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

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

官方定义校验：

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

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

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