1、安装
npm install vee-validate
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;
}
}