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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
超出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处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
jquery的ajax请求全面了解
2013/03/20 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
在Python程序中实现分布式进程的教程
2015/04/28 Python
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
python实现最长公共子序列
2018/05/22 Python
Django中URL的参数传递的实现
2019/08/04 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
python3正则模块re的使用方法详解
2020/02/11 Python
基于python实现坦克大战游戏
2020/10/27 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
财务简历的自我评价
2014/03/05 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
Python基础详解之描述符
2021/04/28 Python
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
python获取带有返回值的多线程
2022/05/02 Python