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 相关文章推荐
JS的反射问题
Apr 07 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
angular中的cookie读写方法
Aug 02 Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
详解JavaScript 高阶函数
Sep 14 Javascript
js实现验证码干扰(动态)
Feb 23 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
详解php命令注入攻击
2019/04/06 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
Python中decorator使用实例
2015/04/14 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
python基础教程之Filter使用方法
2017/01/17 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
python脚本第一行如何写
2020/08/30 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
养殖行业的创业计划书
2014/01/05 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
php中pcntl_fork详解
2021/04/01 PHP
Go归并排序算法的实现方法
2022/04/06 Golang