vue.js表单验证插件(vee-validate)的使用
2018-05-11 10:11
921 查看
vue.js表单验证插件的使用
更多文章,请访问我的博客
综述
特别提示
配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样插件既可以应用于SPA也可以应用于多页面,通用性强
安装
单页安装
npm install vee-validate --save
浏览器安装
<!-- unpkg --> <script src="https://unpkg.com/vee-validate@2.0.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="https://unpkg.com/vee-validate@2.0.0-rc.7"></script> <script> Vue.use(VeeValidate); // good to go. </script>
基础使用
<div class="column is-12"> <label class="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')" class="help is-danger"></span> </p> </div>
代码解析
v-validate=”‘required email’” v-validate 是由该插件提供的指令 作用于html上
“‘required email’” 字段验证的规则,注意双引号之内必须有单引号,多个规则之间用 连接 errors.has(‘email’) 判断emai字段值是否验证通过 email内容指向input的name属性 必须设置成一样 这意味着要用该插件,input上的name属性必须设置errors.first(‘email’) email字段验证不通过时显示相关联的提示信息
验证规则
进一步学习
本地化
使用本地化功能可以让错误提示换成中文
单页中使用
浏览器中使用
var dict = { zh_CN: { messages: { required: function(field){ return '请输入' + field ; }, confirmed: function(field) { return '两次输入的密码不一致'; } }, attributes: { OldPassword: '旧密码', NewPassword: '新密码', ConfirmNewPassword: '确认密码', } } }; VeeValidate.Validator.localize('zh_CN', dict.zh_CN); Vue.use(VeeValidate); var app = new Vue({ // 省略 });
代码解析
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();
API进一步学习
参考文档
阅读更多官网:地址他人项目: Vue 全家桶 + 前端实现登录拦截、登出、校验、购物车等功能
相关文章推荐
- 表单验证插件Validate.js的使用
- 使用jquery.validate.js插件进行表单里控件的验证
- 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
- jquery表单验证插件(jquery.validate.js)的3种使用方式
- Vue中使用vee-validate表单验证的方法
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
- vue 表单验证 vee-validate 简单使用
- Jquery.validate.js表单验证插件的使用
- 表单验证插件Validate.js的使用
- 使用jquery.validate.min.js插件进行表单验证并自定义校验规则
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能,以及使用jquery.validate.js表单验证插件的问题处理
- 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
- jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则
- 表单验证插件jquery.validate.js
- jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js
- jquery.validate.js使用之自定义表单验证规则
- validate() 表单验证插件的使用
- 表单验证插件jquery.validate.js
- jQuery插件 -- 表单验证插件jquery.validate.js
- jQuery插件 -- 表单验证插件jquery.validate.js