欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue.js表单验证插件(vee-validate)的使用教程详解

程序员文章站 2023-12-19 21:58:04
综述 名称:vee-validate 用途:简单的 vue.js 表单验证插件 官网: github: 特别提示 配合laravel使用特别...

综述

名称:vee-validate

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

官网:

github:

特别提示

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

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

vue.js表单验证插件(vee-validate)的使用教程详解

安装

单页安装

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.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.js表单验证插件(vee-validate)的使用教程详解,希望对大家有所帮助

上一篇:

下一篇: