小程序功能及好处_vue.js表单验证插件(vee

摘要: vue.js表格认证软件(vee-validate)的应用实例教程详细说明 本文关键详细介绍了vue.js表格认证软件(vee-validate)的应用,文中根据案例编码给大伙儿详细介绍的十分详尽,具备一定的参照...

vue.js表单验证插件(vee-validate)的使用教程详解       这篇文章主要介绍了vue.js表单验证插件(vee-validate)的使用,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

用途:简单的 Vue.js 表单验证插件

官网:

github:

特别提示

配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样

插件既可以应用于SPA也可以应用于多页面,通用性强

安装

单页安装

npm install vee-validate --save

浏览器安装

 !-- unpkg -- 
 script src="vee-.0-rc.7" /script 

引入项目

单页引入

import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

浏览器引入

 script src="path/to/vue.js" /script 
 script src="vee-.0-rc.7" /script 
 script 
 Vue.use(VeeValidate); // good to go.
 /script 

基础使用

 div 
 label for="email" Email /label 
 p :class="{ 'control': true }" 
 input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email" 
 span v-show="errors.has('email')" /span 
 /div 

代码解析

进一步学习

本地化

使用本地化功能可以让错误提示换成中文

单页中使用

浏览器中使用

VeeValidate(浏览器引入js后建立了一个全局对象)

dict 翻译的内容,其中attributes对象表示字段,messages对象表示提示信息

常用方法

出错渲染

字段验证不通过时渲染提示信息时使用

errors.first(‘field') 显示字段field的第一个出错信息
errors.collect(‘field') 显示字段field的所有出错信息
errors.has(‘field') 判断fileds字段是否检验有误
erros.all() 显示所有的出错信息
errors.any() 判断是否有错误

手动检验

常用于数据提交(写在vue的方法内部)

this.$validator.validate(‘field'); 校验单个字段
this.$validator.validateAll(); 表单整体校验

代码片段

 this.$validator.validateAll().then(function(result) {
 if (result) {
 //成功操作
 } else {
 // 失败操作
 })

检验信息清除

常用于校验成功后清除错误的提示信息

this.errors.clear();

总结

以上所述是小编给大家介绍的vue.js表单验证插件(vee-validate)的使用教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:模板小程序