Vue+VeeValidate使用和遇到的坑——vue表单验证插件

每次写博客都觉得自己话多，我第一次用VeeValidate，首先打开百度…
发现好多安装VeeValidate没有说注意安装的版本，

安装插件

cnpm install vee-validate@2.0.0-rc.25 --save
//下载完会找不到node-sass，再安装下
cnpm install node-sass@latest

我一开始用npm install vee-validate@next --save下载的是4的版本，找不到如下图

已经下载4的版本，请先删掉cnpm uninstall vee-validate，或许是我项目的问题删了之后会报一个找不到node-sass，安装cnpm install node-sass@latest再cnpm install vee-validate@2.0.0-rc.25 --save。就冇问题啦

放入main.js,全局

import './utils/validator'

在相对文件夹路径建validator.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',
  fieldsBagName: 'fieldBags'
}

Vue.use(VeeValidate, config)

// 自定义validate
const dictionary = {
  zh_CN: {
    messages: {
      required: (field) => '请输入',
      numeric : (field) => field + '必须为数值',
      url: () => '请输入正确格式的服务器地址',
      ip: () => '请输入正确的IP地址'
    },
    attributes: {
      ip: 'IP地址',
      httpPort: 'HTTP端口'
    }
  }
}
Validator.updateDictionary(dictionary)

配置就大致解决了，他有自带的有（这也是我百度到的，哈哈哈哈）

alpha

<input v-validate="'required|alpha'" name="" type="text" placeholder="只能输入字符串">

alpha_dash：可以包含英文、数字、下划线、破折号

<input v-validate="'required|alpha_dash'" name="" type="text" placeholder="能输入字母数字破折号下划线">

alpha_num：可以包含英文和数字

<input v-validate="'required|alpha_num'" name="" type="text" placeholder="能输入字母数字">

alpha_spaces：能输入字母空格

<input v-validate="'required|alpha_spaces'" name="" type="text" placeholder="能输入字母空格"><br>

between：在min和max之间的数字

<input v-validate="'required|between: 1,10'" name="" type="text" placeholder="1-10">

confirmed:{target} - 必须和target一样（一般用于需要再次输入的验证，比如密码的再次输入）

<input v-validate="'required|confirmed:123'" name="password" type="text" placeholder="输入的内容要和123相同">

credit_card：输入的内容格式是信用卡的号码格

<input v-validate="'required|credit_card'" name="password" type="text" placeholder="输入的内容格式是信用卡的号码格式">

date_between：:{min,max} - 日期在min和max之间

<input v-validate="'required|date_between:10/09/2016, 20/09/2016'" name="日期" type="text" placeholder="输入的日期要在10/09/2016和20/09/2016之间">

date_format：:{format} - 合法的format格式化日期

<input type="text" v-validate="'date_format:MM/DD/YYYY'" name="" placeholder="输入的日期格式要是MM/DD/YYYY">

decimal:{decimals?} - 数字，而且是decimals进制

<input type="text" v-validate="'decimal:2'" name="" placeholder="输入的数字的小数点个数是2">

digits:{length} - 长度为length的数字

<input type="text" v-validate="'digits:2'" placeholder="数字长度是两位">

dimensions:{width},{height} - 符合宽高规定的图片

<input type="file" v-validate="'dimensions:10,10'" placeholder="上传的图片是10像素到10像素">

email：邮箱格式

<input v-validate="'required|email'" name="email" type="text" placeholder="输入内容为email格式">

ext:[extensions] - 后缀名

<input type="file" v-validate="'ext: zip, png'" placeholder="上传文件后缀名限制为zip和png">

image目前没搜到实例，我也没用到再说

in ／ not_in:[list] - 包含/不包含在数组list内的值
mot_in - in相反（这个没用过，百度是这两个试试就知道了）

<select name="" v-validate="'in:1,3,4'">
        <option value="1">One</option> 
        <option value="2">Invalid</option> 
        <option value="3">Three</option> 
        <option value="4">Four</option>
    </select>

ip：ipv4地址

<input v-validate="'required|ip'" name="ip" type="text" placeholder="输入内容为ip格式">

max:{length} - 最大长度为length的字符

<input type="text" v-validate="'max:10'" name="" placeholder="字符串最大长度是10,空格也计算在内">

max_value：输入的数字最大为

<input type="text" v-validate="'max_value:100'" placeholder="输入的数字最大为100">

mimes： [里面`可以写文件类型] 如果是写image好像不辨别

<input v-validate="'required|mimes:[image/jpeg,image/png]'" name="mimes" type="file” >

min:{length} - 最小长度为length的字符

<input type="text" v-validate="'min:5'" placeholder="输入的字符长度最小为最大为5">

min_value：输入的数字最小为

<input type="text" v-validate="'min_value:5'" placeholder="输入的数字最小为5">

numeric ：- 只允许数字

<input type="text" v-validate="'numeric'" placeholder="输入的数字最小为5">

regex:{pattern} - 值必须符合正则pattern

<input type="text" v-validate="'regex:^([0-9]+)$'" placeholder="regex后面可以写正则表达式，匹配输入的内容">

required：非空

<input v-validate="'required'" name="username" type="text" placeholder="内容必须填写">

size:{kb} - 文件大小不超过

<input type="file" v-validate="'size:100'" placeholder="上传文件大小限制，必须小于100kb">

url:{domain?} - (指定域名的)url

<input v-validate="'required|url'" name="url" type="text" placeholder="输入内容格式为url">

rules：使用rules可以组合使用规则

<input type="text" v-validate="{ rules: { regex: /^([0-9]+)$/, max_value:100 } }" placeholder="使用rules可以组合使用规则">

接下来是自定义的

自定义规则：

Validator.extend('qq', {
  messages: {
 zh_CN:field => 'qq号码输入不正确'
  },
  validate: value => {
 // 获取输入的value
 return /^[1-9][0-9]{4,14}$/.test(value);
  }
});

自定义提示信息

const dictionary = {
  zh_CN: {
    messages: {
      email: () => '邮箱格式不正确哦>.<'
    }
  }
};
Validator.updateDictionary(dictionary);

validator.js定义完成之后，表单如何用

<p>
    <input v-validate="'required|email'" name="email"placeholder="Email">
    <span v-show="errors.has('email')"  >{{ errors.first('email') }}</span>
</p>

顺便说下关于errors：

上面的代码我们看到有errors.has,errors.first,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的所有错误

然后还有最最最重要的一步，表单的确定点击事件

$//this.validator.validate{(}^{\prime }fiel{d}^{\prime });校验单个字段//this.validator.validateAll();表单整体校验$

 this.$validator.validateAll()
        .then((valid) => {
          if (true === valid) {
            console.log('验证通过');
          } else {
            console.log(this.$validator.errors.all());
          }
        })

这里也遇到个小坑，一开始用如下图的方法，if里面拿不到data里return的数据，换成上面的就可以了

// this.$validator.validateAll().then(function (result) {
      //   if (result) {
      //     //成功操作 
      //     a = true;
      //     //return
      //     console.log("xsdc====" + a)
      //   }
      // })