Vue+表单验证 Vee-Validate

111.gif

安装Vee-Validate

cnpm install vee-validate#2.0.0-rc.25 --save

image.png

安装旧版版本： npm install [email protected] 不会出现上面报错。

配置validate.js。抽离出来验证

import Vue from 'vue'
import VeeValidate from 'vee-validate'
import {Validator} from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN';//引入中文文件
 
// 配置中文
Validator.addLocale('zh_CN',zh_CN);
 
const config = {
  locale: 'zh_CN'
};
 
Vue.use(VeeValidate,config);
 
// 自定义validate 
const dictionary = {
   zh_CN: {
      messages: {
        email: () => '请输入正确的邮箱格式',
        required: ( field )=> "请输入" + field
      },
      attributes:{
        phone: '手机',
        Yhm:'用户名',
        pass:'密码',
        email:'邮箱'
      }
  }
};
 
Validator.updateDictionary(dictionary);
 
Validator.extend('phone', {
  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('Yhm', {
  messages: {
    zh_CN:field => field + '用户名最少三位哦',
  },
  validate: value => {
    return value.length > 3 
  }
});

Validator.extend('pass', {
  messages: {
    zh_CN:field => field + '6-16位由字母、数字、特殊符号两两组成',
  },
  validate: value => {
    return value.length >= 6 && /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(value)
  }
});

Validator.extend('email', {
  messages: {
    zh_CN:field => field + '请输入正确的邮箱',
  },
  validate: value => {
    return  /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)
  }
});

main.js中引用

 import  './validate.js'

页面当中使用方法