vee-validate 验证

 

安装 vee-validate

 

cnpm install vee-validate

创建zh_CN.js（内容复制即可）

 

 

export default {
  after: (field, [target]) => ` ${field}必须在${target}之后`,
  alpha_dash: (field) => ` ${field}能够包含字母数字字符，包括破折号、下划线`,
  alpha_num: (field) => `${field} 只能包含字母数字字符.`,
  alpha_spaces: (field) => ` ${field} 只能包含字母字符，包括空格.`,
  alpha: (field) => ` ${field} 只能包含字母字符.`,
  before: (field, [target]) => ` ${field} 必须在${target} 之前.`,
  between: (field, [min, max]) => ` ${field} 必须在${min} ${max}之间.`,
  confirmed: (field, [confirmedField]) => ` ${field} 不能和${confirmedField}匹配.`,
  date_between: (field, [min, max]) => ` ${field}必须在${min}和${max}之间.`,
  date_format: (field, [format]) => ` ${field}必须在在${format}格式中.`,
  decimal: (field, [decimals] = ['*']) => ` ${field} 必须是数字的而且能够包含${decimals === '*' ? '' : decimals} 小数点.`,
  digits: (field, [length]) => ` ${field} 必须是数字，且精确到 ${length}数`,
  dimensions: (field, [width, height]) => ` ${field}必须是 ${width} 像素到 ${height} 像素.`,
  email: (field) => ` ${field} 必须是有效的邮箱.`,
  ext: (field) => ` ${field} 必须是有效的文件.`,
  image: (field) => ` ${field} 必须是图片.`,
  in: (field) => ` ${field} 必须是一个有效值.`,
  ip: (field) => ` ${field} 必须是一个有效的地址.`,
  max: (field, [length]) => ` ${field} 不能大于${length}字符.`,
  mimes: (field) => ` ${field} 必须是有效的文件类型.`,
  min: (field, [length]) => ` ${field} 必须至少有 ${length} 字符.`,
  not_in: (field) => ` ${field}必须是一个有效值.`,
  numeric: (field) => ` ${field} 只能包含数字字符.`,
  regex: (field) => ` ${field} 格式无效.`,
  required: (field) => `${field} 是必须的.`,
  size: (field, [size]) => ` ${field} 必须小于 ${size} KB.`,
  url: (field) => ` ${field}不是有效的url.`
}

 

main.js 里添加

 

import VeeValidate, { Validator } from 'vee-validate'
// 引用中文提示
import zh from './components/vee-validate/zh'
Vue.use(VeeValidate, {
  locale: 'zh'
})
Validator.addLocale(zh)

Validator.extend('phone', {
  messages: {
    zh: '请输入正确的手机或单位固话（格式：区号-电话）'
  },
  validate: value => {
    return value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value) || /^(\d{3}-)(\d{8})$|^(\d{4}-)(\d{7})$|^(\d{4}-)(\d{8})$/.test(value)
  }
})
Validator.extend('email', {
  messages: {
    zh: '请输入正确邮箱地址'
  },
  validate: value => {
    return /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/.test(value)
  }
})
const dict = {
  zh: {
    custom: {
      email: {
        required: '邮箱不能为空' // messages can be strings as well.
      },
      phone: {
        required: '手机不能为空'
      },
      company: {
        required: '公司名称不能为空'
      },
      uname: {
        required: '联系人不能为空'
      },
      duty: {
        required: '职务信息不能为空'
      },
      code: {
        required: '验证码不能为空'
      }
    }
  }
}

Validator.updateDictionary(dict)

html里使用

 

 

  

    联系姓名
    
    *
  
  
{{ errors.first('uname') }}
  

     联系电话
     
     *
 
 
{{ errors.first('phone') }}
 

     联系邮箱
     
     *
 
 
{{ errors.first('email') }}