脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vee-validate表单校验的基本使用

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

 更新时间：2018年06月25日 08:27:26   作者：绝对小孩  
这篇文章主要介绍了vee-validate表单校验的基本使用,需要的朋友可以参考下

今天主要记录一下用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>

结果如下：

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

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>

结果：

其中  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表单校验的几种基本使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 详解处理Vue单页面应用SEO的另一种思路

    详解处理Vue单页面应用SEO的另一种思路

    这篇文章主要介绍了详解处理Vue单页面应用SEO的另一种思路，本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介绍，非常具有实用价值，需要的朋友可以参考下
    2018-11-11
  • vue跳转页面并且实现参数传递接受示例

    vue跳转页面并且实现参数传递接受示例

    这篇文章主要为大家介绍了vue跳转页面并且实现参数传递接受示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-06-06
  • Vue前后端不同端口的实现方法

    Vue前后端不同端口的实现方法

    今天小编就为大家分享一篇Vue前后端不同端口的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue.js表单验证插件(vee-validate)的使用教程详解

    vue.js表单验证插件(vee-validate)的使用教程详解

    这篇文章主要介绍了vue.js表单验证插件(vee-validate)的使用，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • vue实现登录时图形验证码

    vue实现登录时图形验证码

    这篇文章主要为大家详细介绍了vue实现登录时图形验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Element-UI实现复杂table表格结构的操作代码

    Element-UI实现复杂table表格结构的操作代码

    Element-UI组件el-table用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作,本文给大家介绍Element-UI实现复杂table表格结构的操作代码,感兴趣的朋友一起看看吧
    2023-12-12
  • 在vue中使用export default导出的class类方式

    在vue中使用export default导出的class类方式

    这篇文章主要介绍了在vue中使用export default导出的class类方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • vue中使用moment设置倒计时的方法

    vue中使用moment设置倒计时的方法

    这篇文章给大家介绍了vue中使用moment设置倒计时的方法,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • Vue使用自定义指令实现拖拽行为实例分析

    Vue使用自定义指令实现拖拽行为实例分析

    这篇文章主要介绍了Vue使用自定义指令实现拖拽行为,结合实例形式分析了Vue使用自定义指令实现拖拽行为具体步骤、原理与操作注意事项,需要的朋友可以参考下
    2020-06-06
  • Vue实现指令式动态追加小球动画组件的步骤

    Vue实现指令式动态追加小球动画组件的步骤

    这篇文章主要介绍了Vue实现指令式动态追加小球动画组件的步骤，帮助大家更好的理解和实用vue，感兴趣的朋友可以了解下
    2020-12-12

最新评论