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里使用

<ul>  <li>    <span>联系姓名</span>    <input type="text" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('uname') }" name="uname" ref="name" class="inputSty" placeholder="请输入联系人姓名">    <b>*</b>  </li>  <li v-show="errors.has('uname')" class="is-danger">{{ errors.first('uname') }}</li>  <li>     <span>联系电话</span>     <input type="text" v-validate="'required|phone'" :class="{'input': true, 'is-danger': errors.has('phone') }"  name="phone"  ref="tel" class="inputSty" placeholder="请输入手机或单位固话（格式：区号-电话）">     <b>*</b> </li> <li v-show="errors.has('phone')" class="is-danger">{{ errors.first('phone') }}</li> <li>     <span>联系邮箱</span>     <input type="text" v-validate="'required|email'" name="email" :class="{'input': true, 'is-danger': errors.has('email') }"  ref="mail" class="inputSty" placeholder="请输入联系邮箱">     <b>*</b> </li> <li v-show="errors.has('email')" class="is-danger">{{ errors.first('email') }}</li></ul>