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 相关文章推荐
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 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二维数组排序详解
2013/11/06 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
jQuery之按钮组件的深入解析
2013/06/19 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
python迭代器与生成器详解
2016/03/10 Python
Python类的继承用法示例
2019/01/31 Python
pycharm 安装JPype的教程
2019/08/08 Python
Numpy的简单用法小结
2019/08/28 Python
Python 寻找局部最高点的实现
2019/12/05 Python
python中p-value的实现方式
2019/12/16 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
新大陆软件面试题
2016/11/24 面试题
关于礼仪的演讲稿
2014/01/04 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
体育之星事迹材料
2014/05/11 职场文书
开展创先争优活动总结
2014/08/28 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
彻底理解golang中什么是nil
2021/04/29 Golang
python图像处理 PIL Image操作实例
2022/04/09 Python