学习vee-validate,首先可以去阅读<强>官方文档强,更为详细可以阅读官网中的<>强规则。
您可以通过npm或通过CDN安装此插件。
<强> 1。NPM
npm安装vee-validate——保存
<强> 2。CDN
& lt;脚本src=" https://www.yisu.com/zixun/path/to/vue.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/path/to/vee-validate.js "祝辞& lt;/script>
& lt; script>
Vue.use (VeeValidate);//好了。
& lt;/script>
<强>或者你可以使用ES6导入它:
从“进口Vue Vue ';
从“进口VeeValidate vee-validate ';
Vue.use (VeeValidate);
之前
没有配置过的错误提示默认使用英文显示的,如果想要用中文显示需要我们手动配置一下,首先还是在main.js中引入
进口VeeValidate,从“vee-validate”{验证器};
从“进口cn vee-validate/dist/地区/zh_CN ';
验证器。本地化(“cn”, cn);
之前
//修改默认错误提示
const dict={
cn:{消息:{要求:(名字)=比;“${名称}不能为空!'}}//名字接受别名的值。
}
Validator.localize(东西);
演示中修改了所需的错误提示信息,因为使用的中文(前面引入的),所以是cn。最后用定位方法加入到验证器中。
验证器。扩展(“移动”,{
getMessage:字段=比;“请输入正确的手机号码”,
验证:价值=https://www.yisu.com/zixun/>价值。长度===11 & &/^ (13 | 14 15 | | | 17 18)[0 - 9]{1}/d{8})美元/test(值)
});
扩展的第一个参数就是自定义的规则的名字,可以像使用默认规则一样使用它,getMessage中是错误提示信息,验证是验证规则,返回一个布尔值或承诺。
& lt; template>
& lt; div类=薄氨?
& lt; @submit形式。防止=癮pplyCoupon”类=薄氨?
& lt;标签类=" "祝辞手机号& lt;/label>
& lt; p class=薄氨?
& lt;输入v模型="电话" name=暗缁啊?class=" type=拔谋尽?
占位符="请输入手机号”祝辞& lt; br>
& lt;跨度v-show=" errors.has(电话)”class=按砦蟆痹趝{errors.first(电话)}}& lt;/span>
& lt;/p>
& lt;标签类=" "祝辞姓名& lt;/label>
& lt; p class=薄氨?
& lt;输入v模型="名称" name="名称":class=" type=拔谋尽?
占位符="请输入手机号”祝辞& lt; br>
& lt;跨度v-show=" errors.has(名字)”class=按砦蟆痹趝{errors.first(“名字”)}}& lt;/span>
& lt;/p>
& lt; p class=薄氨?
& lt;按钮类型=疤峤弧崩?" name="按钮"祝辞确定& lt;/button>
& lt;/p>
& lt;/form>
& lt;/div>
& lt;/template>
& lt; script>
进口VeeValidate,从“vee-validate”{验证器};
从“进口cn vee-validate/dist/地区/zh_CN ';
验证器。本地化(“cn”, cn);
const dict={
cn:{消息:{要求:(名字)=比;“${名称}不能为空!’}}
}
Validator.localize(东西);
出口默认{
名称:“coupon-example”,
验证器:空,
数据:()=比;({
电话:”,
名称:”,
错误:零
}),
计算:{},
方法:{
applyCoupon(){//提交执行函数
this.validator。validate(“名字”,this.name)((结果)=比;这一点。贴现=结果);
this.validator。validate(‘电话’,this.phone)((结果)=比;这一点。贴现=结果);
}
}，
创建(){
这一点。验证器=新确认器({});
验证器。扩展(“移动”,{
getMessage:字段=比;“请输入正确的手机号码”,
验证:价值=https://www.yisu.com/zixun/>价值。长度===11 & &/^ (13 | 14 15 | | | 17 18)[0 - 9]{1}/d{8})美元/test(值)
}）;
验证器。扩展(“名字”,{
getMessage:字段=比;“请输入正确姓名”,
验证:价值=https://www.yisu.com/zixun/>价值==滥贰?
}）;
this.validator。附加({name:“名字”,规则:“要求|名称”,别名:“姓名'});
this.validator。附加({name:“手机”,规则:“要求|移动”,别名:“手机'});//使用附加以FieldOptions作为其第一个参数的方法添加验证规则。
这一点。美元的设置(“错误”,这this.validator.errors);
}
};
& lt;/script>
& lt; style>
. error {
字体大小:12 px;
颜色:# ff1c13;
}
& lt;/style>
