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>

猜你喜欢