vue中vee validate表单校验的几种基本使用


Posted in Javascript onJune 25, 2018

今天主要记录一下用vee-validate来进行表单校验的几个基本使用。包括最基础的必填和长度校验;异步请求服务的校验(重名校验),还有延迟校验。如何引入等就不在这里赘述了,直接进入主题。

1.必填和长度校验

直接采用v-validate属性进行配置,不同的校验采用 ‘|' 隔开。是否有报错根据 errors.has('userName') 进行判断,‘userName'对应的是表单的name属性的值。

errors.first('userName)会展示表单校验中第一个错误信息。

<el-col :span="4" class="form-label">
  <label>用户名</label>
 </el-col>
 <el-col :span="8">
  <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
  <span v-show="errors.has('userName')" class="error">{{ errors.first('userName') }}</span>
 </el-col>

结果如下:

vue中vee validate表单校验的几种基本使用

从结果我们可以看到,校验的错误信息是展示了,但是默认都是英文的,这个可能有时跟我们实际开发的需求不是一致的。这个我们可以采用

vee-validate的国际化去进行中文的展示。但是这里我要介绍的是另一种方式,如果是系统只需要支持一种语言,我觉得用这种方式就可以。

直接采用 errors.first('userName:required') 即 ‘字段名:校验规则'  的方式进行判断进而展示对应提示信息的方式。这个方式可以让表单在对应校验不通过时展示我们自己定义对应的个性化提示信息。

优点是:配置简单,方便实现个性化提示。

<el-col :span="4" class="form-label">
  <label>用户名</label>
</el-col>
<el-col :span="8">
  <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
  <span v-show="errors.first('userName:required')" class="error">用户名为必填项</span>
  <span v-show="errors.first('userName:min')" class="error">用户名的最小长度为2</span>
  <span v-show="errors.first('userName:max')" class="error">用户名的最大长度为20</span>
</el-col>

 2.异步校验 和延迟

异步校验,主要就是两部分,一个是校验器的定义,一个是使用

定义部分:

import { Validator } from 'vee-validate';
const emailsDB = [
 'abcd@cc.com'
];
const isUnique = value => new Promise((resolve) => {
 setTimeout(() => {
  if (emailsDB.indexOf(value) === -1) {
   return resolve({
    valid: true
   });
  }

  return resolve({
   valid: false,
   data: {
    message: `${value} 已存在.`
   }
  });
 }, 200);
});
Validator.extend('unique', {
 validate: isUnique,
 getMessage: (field, params, data) => data.message
});

使用:

<el-col :span="4" class="form-label">
  <label>邮箱</label>
 </el-col>
 <el-col :span="8">
  <el-input name="email" v-model="email" v-validate="'unique'" data-vv-delay="1000"></el-input>
  <span v-show="errors.first('email:unique')" class="error">重复</span>
 </el-col>

结果:

vue中vee validate表单校验的几种基本使用

其中  data-vv-delay="1000"  就是延迟校验的使用。1000即1000毫秒

以下是几个例子的完整代码:

<template>
  <div>
    <el-form name="myForm" novalidate>
      <el-row>
        <el-col :span="4" class="form-label">
          <label>邮箱</label>
        </el-col>
        <el-col :span="8">
          <el-input name="email" v-model="email" v-validate="'unique'" data-vv-delay="1000"></el-input>
          <span v-show="errors.first('email:unique')" class="error">重复</span>
        </el-col>

        <el-col :span="4" class="form-label">
          <label>用户名</label>
        </el-col>
         <el-col :span="8">
          <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
          <span v-show="errors.first('userName:required')" class="error">用户名为必填项</span>
          <span v-show="errors.first('userName:min')" class="error">用户名的最小长度为2</span>
          <span v-show="errors.first('userName:max')" class="error">用户名的最大长度为20</span>
        </el-col>
        <!-- <el-col :span="8">
          <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
          <span v-show="errors.has('userName')" class="error">{{ errors.first('userName') }}</span>
        </el-col> -->
        
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { Validator } from 'vee-validate';

const emailsDB = [
  'abcd@cc.com'
];
const isUnique = value => new Promise((resolve) => {
  setTimeout(() => {
    if (emailsDB.indexOf(value) === -1) {
      return resolve({
        valid: true
      });
    }

    return resolve({
      valid: false,
      data: {
        message: `${value} 已存在.`
      }
    });
  }, 200);
});

Validator.extend('unique', {
  validate: isUnique,
  getMessage: (field, params, data) => data.message
});
export default {
  data() {
    return {
      email: '',
      userName: ''
    }
  }
}
</script>
<style scoped>
.form-label {
 text-align: right;
 padding-right: 10px;
}
.error {
 color: red;
}
</style>

总结

以上所述是小编给大家介绍的vue中vee validate表单校验的几种基本使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
关于React Native使用axios进行网络请求的方法
Aug 02 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 #Javascript
JS的函数调用栈stack size的计算方法
Jun 24 #Javascript
JavaScript中var、let、const区别浅析
Jun 24 #Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 #Javascript
Vue中$refs的用法详解
Jun 24 #Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 #Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 #Javascript
You might like
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
js获取当前select 元素值的代码
2010/04/19 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
深入理解javascript原型链和继承
2014/09/23 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
判断js的Array和Object的实现方法
2016/08/29 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
在Python中使用成员运算符的示例
2015/05/13 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
wxPython实现整点报时
2019/11/18 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
Django框架请求生命周期实现原理
2020/11/13 Python
Python实现京东抢秒杀功能
2021/01/25 Python
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
英语感恩演讲稿
2014/01/14 职场文书
德语专业求职信
2014/03/12 职场文书
遗产继承公证书
2014/04/09 职场文书
毕业生个人自荐书
2015/03/05 职场文书