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 相关文章推荐
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
js实现目录定位正文示例
Nov 14 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
js实现简单扫雷
Nov 27 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计算当前程序执行时间示例
2014/04/24 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
python采集博客中上传的QQ截图文件
2014/07/18 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
Python创建自己的加密货币的示例
2021/03/01 Python
机械工程师求职自我评价
2013/09/23 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python