vue表单校验vee-validate

下面介绍一款vue中的表单校验插件。

一、安装

npm install vee-validate --save-dev

二、配置

vee-validate默认是英文提示的校验，我们需要把它配置成中文的。可以使用如下方法：

//validate.js
import Vue from 'vue';
import VeeValidate, {
  Validator
} from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN';//引入中文提示语言

const dictionary = {
  zh_CN
};
//校验的一些配置信息
const config = {
  errorBagName: 'errors2', // change if property conflicts.
  fieldsBagName: 'fields',
  delay: 0,
  locale: 'zh_CN',
  dictionary: null,
  strict: true,
  enableAutoClasses: false,
  classNames: {
    touched: 'touched', // the control has been blurred
    untouched: 'untouched', // the control hasn't been blurred
    valid: 'valid', // model is valid
    invalid: 'invalid', // model is invalid
    pristine: 'pristine', // control has not been interacted with
    dirty: 'dirty' // control has been interacted with
  },
  events: 'input|blur',
  inject: true
};

Validator.updateDictionary(dictionary);//更新配置
Vue.use(VeeValidate, config);

这样我们便完成了中文提示的配置了。

三、简单使用

如下代码基于微信端ui框架vux

<x-input label-width='4rem' placeholder="请输入手机号" v-validate="'required'" name='手机号' v-model="mobile">
              <i slot="label" class="iconfont icon-people"></i>
            </x-input>
            <span v-show="errors2.has('手机号') && submitted" class="errors-tip is-danger">{{ errors2.first('手机号') }}</span>

v-validate=“‘required’” 表示必填校验，name=’手机号’ name属性是必须得，这个是告诉vee-validate要校验的字段为手机号，同时也用于错误提示。v-show=”errors2.has(‘手机号’) && submitted” submitted是我们为校验设置的标志，比如提交时才显示错误内容。errors2.first(‘手机号’)表示显示手机号校验的第一个错误内容。

四、内置校验规则

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

具体可参考官网vee-validate

五、自定义校验规则

内置规则往往是不够我们使用的，vee-validate提供十分简便的方法让我们扩展校验规则，可参考如下例子：

//配置验证规则
const validateRules = {
    mobile: {
      messages: {//错误提示消息
        zh_CN: field => '手机号码输入不正确',
      },
      validate: value => {//字段校验规则
        return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
      }
    },
    idCard: {
      messages: {
        zh_CN: field => '身份证号码输入不正确',
      },
      validate: value => {
        var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
        //18位
        var regs =
          /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
        return reg.test(value) || regs.test(value);
      }
    },
    passWord: {
      messages: {
        zh_CN: field => '密码需为8-16位数字与字母组合',
      },
      validate: value => {
        let reg1 = /\d+/;
        let reg2 = /[a-zA-Z]/;
        return value.length >= 8 && value.length <= 16 &&reg1.test(value) && reg2.test(value);
      }
    }
  }
  //添加验证规则
Object.keys(validateRules).forEach((key) => {
  Validator.extend(key, validateRules[key]);
});

我们只需要添加将这段上文的validate.js便可以了。
然后在我们的main.js中将这个validate.js引入，便可以启动我们的校验了。