Vee validate validation

install vee-validate

cnpm install vee-validate

establish zh_CN.js（ Copy the content ）

export default {
  after: (field, [target]) => ` ${field} Must be in ${target} after `,
  alpha_dash: (field) => ` ${field} Can contain alphanumeric characters , Including dashes 、 Underline `,
  alpha_num: (field) => `${field}  Can only contain alphanumeric characters .`,
  alpha_spaces: (field) => ` ${field}  Can only contain alphabetic characters , Including Spaces .`,
  alpha: (field) => ` ${field}  Can only contain alphabetic characters .`,
  before: (field, [target]) => ` ${field}  Must be in ${target}  Before .`,
  between: (field, [min, max]) => ` ${field}  Must be in ${min} ${max} Between .`,
  confirmed: (field, [confirmedField]) => ` ${field}  Unable to join ${confirmedField} matching .`,
  date_between: (field, [min, max]) => ` ${field} Must be in ${min} and ${max} Between .`,
  date_format: (field, [format]) => ` ${field} Must be in ${format} In the format .`,
  decimal: (field, [decimals] = ['*']) => ` ${field}  It must be numeric and can contain ${decimals === '*' ? '' : decimals}  decimal point .`,
  digits: (field, [length]) => ` ${field}  It has to be numbers , Accurate to  ${length} Count `,
  dimensions: (field, [width, height]) => ` ${field} Must be  ${width}  Pixels to  ${height}  Pixels .`,
  email: (field) => ` ${field}  Must be a valid mailbox .`,
  ext: (field) => ` ${field}  Must be a valid file .`,
  image: (field) => ` ${field}  It must be a picture .`,
  in: (field) => ` ${field}  Must be a valid value .`,
  ip: (field) => ` ${field}  Must be a valid address .`,
  max: (field, [length]) => ` ${field}  Not greater than ${length} character .`,
  mimes: (field) => ` ${field}  Must be a valid file type .`,
  min: (field, [length]) => ` ${field}  There must be at least  ${length}  character .`,
  not_in: (field) => ` ${field} Must be a valid value .`,
  numeric: (field) => ` ${field}  Can only contain numeric characters .`,
  regex: (field) => ` ${field}  Invalid format .`,
  required: (field) => `${field}  Is a must .`,
  size: (field, [size]) => ` ${field}  Must be less than  ${size} KB.`,
  url: (field) => ` ${field} It's not effective url.`
}

main.js Add in

import VeeValidate, { Validator } from 'vee-validate'
//  Quote Chinese tips 
import zh from './components/vee-validate/zh'
Vue.use(VeeValidate, {
  locale: 'zh'
})
Validator.addLocale(zh)

Validator.extend('phone', {
  messages: {
    zh: ' Please enter the correct mobile phone or fixed line （ Format ： Area code - Telephone ）'
  },
  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: ' Please enter the correct email address '
  },
  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: ' The mailbox cannot be empty ' // messages can be strings as well.
      },
      phone: {
        required: ' Mobile phone cannot be empty '
      },
      company: {
        required: ' Company name cannot be empty '
      },
      uname: {
        required: ' Contact cannot be empty '
      },
      duty: {
        required: ' Job information cannot be empty '
      },
      code: {
        required: ' Verification code cannot be empty '
      }
    }
  }
}

Validator.updateDictionary(dict)

html Use in

<ul>
  <li>
    <span> Contact name </span>
    <input type="text" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('uname') }" name="uname" ref="name" class="inputSty" placeholder=" Please enter the contact name ">
    <b>*</b>
  </li>
  <li v-show="errors.has('uname')" class="is-danger">{
   { errors.first('uname') }}</li>
  <li>
     <span> contact number </span>
     <input type="text" v-validate="'required|phone'" :class="{'input': true, 'is-danger': errors.has('phone') }"  name="phone"  ref="tel" class="inputSty" placeholder=" Please enter mobile phone or fixed line （ Format ： Area code - Telephone ）">
     <b>*</b>
 </li>
 <li v-show="errors.has('phone')" class="is-danger">{
   { errors.first('phone') }}</li>
 <li>
     <span> Contact email </span>
     <input type="text" v-validate="'required|email'" name="email" :class="{'input': true, 'is-danger': errors.has('email') }"  ref="mail" class="inputSty" placeholder=" Please enter the contact email ">
     <b>*</b>
 </li>
 <li v-show="errors.has('email')" class="is-danger">{
   { errors.first('email') }}</li>
</ul>