vue使用veevalidate进行登录提交验证

1、安装

npm install vee-validate

2、配置

a、新建veevalidate.js存储验证信息

import Vue from 'vue'
import VeeValidate, { Validator } from 'vee-validate'
// 引用中文提示  
import zh from 'static/js/zh_CN'  
Vue.use(VeeValidate, {  
  locale: 'zh'  
})  
Validator.addLocale(zh)    
Validator.extend('username', {  
  messages: {  
    zh: '请输入大于15小于200'  
  },  
  validate: value => {  
  //大于15小于200
    return /^1[6-9]$|^[2-9]\d$|^1\d{2}$/.test(value)  
  }  
})
Validator.extend('passwordd', {  
  messages: {  
    zh: '请输入大于10小于200'  
  },  
  validate: value => {  
    return /^1[1-9]$|^[2-9]\d$|^1\d{2}$/.test(value)  
  }  
})
const dict = {  
  zh: {  
    custom: {
    username:{
    required: '您还没有填写用户名！'
    }, 
    passwordd:{
    required: '您还没有输入密码！'
    }      
    }  
  }  
}
Validator.updateDictionary(dict)  

b、main.js引入

import 'static/js/veevalidate.js'

3、组件使用

<form @submit.prevent="submit">

<div class="con" v-show="ison">
     <ul class="login_ways_mt">
      <li>
        <input type="text" autofocus="autofocus"  v-validate="'required|username'" name="username" placeholder="用户名/手机号/Email" v-model="userphoneemail">
          <p class="input_tip input_tip01">
            <span><img :src="imgsrc+'xiaosanjiao.png'"></span>
            <em>请填写此字段</em>                           
          </p>
      </li>
      <li>
        <input type="password" v-validate="'required|passwordd'" placeholder="请输入您的密码" v-model="passwordd" name="passwordd">     //name要一致
          <p class="input_tip input_tip02">
            <span><img :src="imgsrc+'xiaosanjiao.png'"></span>
            <em>请填写此字段</em>
          </p>
      </li>
    </ul>
</div>

</form> 

submit(){
    var username=this.userphoneemail;
    var passwordd=this.passwordd;
    //不输入验证 无法自动获取焦点  
    if(this.errors.has('username')||$("input[name='username']").val()==''){         
      $('.input_tip01 em').text(this.errors.first('username')); //验证信息显示
      $('.input_tip01').show();
      setTimeout(function(){$('.input_tip01').hide()},1000)
      $("input[name='passwordd']").focus();
      return;
    }     
    if(this.errors.has('passwordd')||$("input[name='passwordd']").val()==''){ 
      alert(this.errors.has('passwordd')); //验证信息显示
      $('.input_tip02 em').text(this.errors.first('passwordd'));
      $('.input_tip02').show();
      setTimeout(function(){$('.input_tip02').hide()},1000)
      $('.input_tip02').focus();
      return;
    }      
}