这是Vue的一个插件。js允许您以一种简单而强大的方式验证输入字段，并显示错误。
官方文档veeValidate
vue表单验证.png
安装
npm
npm install vee-validate --save
cdn
<script src="path/to/vue.js"></script>
<script src="path/to/vee-validate.js"></script>
<script>
Vue.use(VeeValidate); // good to go.
</script>
或者你可以用ES6
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
中文的配置
我在网上搜了各种方法均无效
对了，如果cnpm install vee-validate --save没有出现语言包，可以试试这个
cnpm install vee-validate@^2.0.0-rc.26 --save
必须加上版本号，这样才node_modules的文件下有个veeValidate文件夹，里面有个dist文件，不带版本号出现不了那个locale文件
语言包.png
我搜寻了几篇帖子使用vee-validate表单插件是如何设置中文提示？这篇是最靠谱的
首先安装i18n
cnpm install --save vue-i18n
然后在main.js里面引入
import VeeValidate from 'vee-validate';
import {Validator} from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN' //加载语言包应该写成这个样子
import VueI18n from 'vue-i18n';
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh_CN',
})
Vue.use(VeeValidate, {
i18n,
i18nRootKey: 'validation',
dictionary: {
zh_CN
}
});
在模板里面使用
<div class="g-form-line">
<span class="g-form-label">邮箱</span>
<div class="g-form-input">
<input v-validate ="'required|email'" type="text" id="email" name="myEmail" :class="{'input': true, 'is-danger': errors.has('email') }">
</div>
<span v-show="errors.has('myEmail')" class="help is-danger">{{ errors.first('myEmail')}}</span>
</div>
这样子中文就可以出现了
自定义消息
const dict = {
messages:{
required:()=>'这个是必须的'
}
}
const validator = new Validator({});
validator.localize('zh_CN',dict);
自定义规则
Validator.extend('username', {
getMessage: field => '以字母或者下划线开头，可包含字母数字下划线',
validate: value => {
return /^[a-zA-Z0-9_-]{4,10}$/.test(value)
}
});
Validator.extend('phonenumber', {
getMessage: field => field + '必须是11位手机号码',
validate: value => {
return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
}
});
Validator.extend('password', {
getMessage: field => field + '最少6位，包括至少1字母、特殊字符、数字',
validate: value => {
return /^.*(?=.{6,})(?=.*\d)(?=.*[A-Za-z])(?=.*[!@#$%^&*? ]).*$/.test(value)
}
});
在模板中使用
<div class="g-form-line">
<span class="g-form-label">用户名</span>
<div class="g-form-input">
<input v-validate ="'required|username'" type="text" id="email" name="myUsername">
</div>
<span v-show="errors.has('myUsername')" class="help is-danger">{{ errors.first('myUsername')}}</span>
</div>
<div class="g-form-line">
<span class="g-form-label">手机号码</span>
<div class="g-form-input">
<input v-validate ="'required|phonenumber'" type="text" id="phonenumber" name="myPnumber">
</div>
<span v-show="errors.has('myPnumber')" class="help is-danger">{{ errors.first('myPnumber')}}</span>
</div>
<div class="g-form-line">
<span class="g-form-label">邮箱</span>
<div class="g-form-input">
<input v-validate ="'required|email'" type="text" id="email" name="myEmail" :class="{'input': true, 'is-danger': errors.has('email') }">
</div>
<span v-show="errors.has('myEmail')" class="help is-danger">{{ errors.first('myEmail')}}</span>
</div>
<div class="g-form-line">
<span class="g-form-label">密码：</span>
<div class="g-form-input" >
<input type="password" v-validate="'required|password|confirmed:pwd_confirm'" id="password" name="myPassWord" placeholder="请输入密码" >
</div>
<span v-show="errors.has('myPassWord')" class="help is-danger">{{ errors.first('myPassWord')}}</span>
</div>
内置校验规则
after{target} - 比target要大的一个合法日期，格式(DD/MM/YYYY)
alpha - 只包含英文字符
alpha_dash - 可以包含英文、数字、下划线、破折号
alpha_num - 可以包含英文和数字
before:{target} - 和after相反
between:{min},{max} - 在min和max之间的数字
confirmed:{target} - 必须和target一样
date_between:{min,max} - 日期在min和max之间
date_format:{format} - 合法的format格式化日期
decimal:{decimals?} - 数字，而且是decimals进制
digits:{length} - 长度为length的数字
dimensions:{width},{height} - 符合宽高规定的图片
email - 不解释
ext:[extensions] - 后缀名
image - 图片
in:[list] - 包含在数组list内的值
ip - ipv4地址
max:{length} - 最大长度为length的字符
mimes:[list] - 文件类型
min - max相反
not_in - in相反
numeric - 只允许数字
regex:{pattern} - 值必须符合正则pattern
required - 不解释
size:{kb} - 文件大小不超过
url:{domain?} - (指定域名的)url
作者：乖乖果效36
链接：https://www.jianshu.com/p/bd606e194392
更多详细内置规则可以点击这里
网友评论