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

vue.js表单验证插件的使用

更多文章,请访问我的博客


综述

名称:vee-validate

用途:简单的 Vue.js 表单验证插件

官网:地址

github:地址

特别提示

配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样

插件既可以应用于SPA也可以应用于多页面,通用性强

效果图

安装

单页安装
npm install vee-validate --save
浏览器安装
  <!-- unpkg -->
  <script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>

引入项目

单页引入
import Vue from 'vue';
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);
浏览器引入
  <script src="path/to/vue.js"></script>
 <script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>
  <script>
    Vue.use(VeeValidate); // good to go.
  </script>

基础使用

<div class="column is-12">
    <label class="label" for="email">Email</label>
    <p :class="{ 'control': true }">
        <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
        <span v-show="errors.has('email')" class="help is-danger"></span>
    </p>
</div>
代码解析
v-validate=”‘requiredemail’”

v-validate 是由该插件提供的指令 作用于html上

“‘requiredemail’” 字段验证的规则,注意双引号之内必须有单引号,多个规则之间用连接

errors.has(‘email’) 判断emai字段值是否验证通过 email内容指向input的name属性 必须设置成一样 这意味着要用该插件,input上的name属性必须设置

errors.first(‘email’) email字段验证不通过时显示相关联的提示信息

验证规则

地址

进一步学习

本地化
使用本地化功能可以让错误提示换成中文
单页中使用
浏览器中使用
var dict = {
 zh_CN: {
  messages: {
   required: function(field){
     return '请输入' + field ;
   },
   confirmed: function(field) {
     return '两次输入的密码不一致';
   }
 },
 attributes: {
   OldPassword: '旧密码',
   NewPassword: '新密码',
   ConfirmNewPassword: '确认密码',
 }
 }
};
VeeValidate.Validator.localize('zh_CN', dict.zh_CN);
Vue.use(VeeValidate);
var app = new Vue({
// 省略
});
代码解析

VeeValidate(浏览器引入js后建立了一个全局对象)

dict 翻译的内容,其中attributes对象表示字段,messages对象表示提示信息

本地化进一步参考
常用方法
出错渲染

字段验证不通过时渲染提示信息时使用

errors.first(‘field’) 显示字段field的第一个出错信息

errors.collect(‘field’) 显示字段field的所有出错信息

errors.has(‘field’) 判断fileds字段是否检验有误

erros.all() 显示所有的出错信息

errors.any() 判断是否有错误

手动检验

常用于数据提交(写在vue的方法内部)

this.$validator.validate(‘field’); 校验单个字段

this.$validator.validateAll(); 表单整体校验

代码片段

       this.$validator.validateAll().then(function(result) {
          if (result) {
           //成功操作
          } else {
           // 失败操作
          }
       })
检验信息清除

常用于校验成功后清除错误的提示信息

this.errors.clear();

API进一步学习

参考文档

官网:地址

他人项目: Vue 全家桶 + 前端实现登录拦截、登出、校验、购物车等功能

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: vee-validate是一个基于Vue.js表单验证库,它可以让你轻松地在Vue.js应用中对表单进行验证。它允许你定义验证规则,并使用Vue组件将验证集成到表单中。vee-validate还具有自定义错误消息和本地化的功能,使你能够根据自己的需要定制验证流程。 ### 回答2: vee-validate是一个基于Vue.js的强大的表单验证库。它提供了许多内置的验证规则和自定义规则,可以在表单中轻松实现数据的验证和错误提示。 vee-validate的主要特点包括: 1. 简单易用:vee-validate提供了简洁明了的API,使用起来非常方便。通过简单地在表单输入元素上添加相应的指令,就可以实现验证功能。 2. 内置验证规则:vee-validate内置了许多常用的验证规则,包括必填、邮箱、URL、手机号码等等。只需设置规则名称即可应用相应的验证规则,无需自己编写复杂的验证逻辑。 3. 自定义规则:除了内置的规则,vee-validate还支持自定义规则。可以根据具体需求编写自定义的验证逻辑,非常灵活。 4. 错误提示:vee-validate提供了丰富的错误提示功能。在表单验证失败时,会自动显示相应的错误信息,用户可以清楚地知道出错的地方以及具体的错误原因。 5. 异步验证:vee-validate还支持异步验证,可以进行远程数据验证或耗时操作的验证。在异步验证完成前,用户将无法提交表单。 总之,vee-validate是一个非常实用和强大的表单验证库,能够大大简化表单验证的实现,提高开发效率。无论是小型网站还是大型应用程序,都可以使用vee-validate来实现表单验证。 ### 回答3: vee-validate是一个基于Vue.js表单验证插件。它提供了一组易于使用和灵活的验证规则,可以帮助我们在前端实现强大的表单验证功能。 vee-validate使用非常简单。我们只需要在Vue组件中引入vee-validate并且在表单元素上添加相应的验证规则即可。例如,我们可以使用"required"规则来验证一个输入框是否为空,使用"email"规则来验证邮箱格式等。除了内置的规则外,vee-validate还允许自定义规则来满足我们的特定验证需求。 除了提供便捷的验证规则外,vee-validate还提供了灵活的错误信息处理方式。我们可以自定义错误消息,使其符合我们的项目需求,并可以在表单提交时进行错误信息的展示。 另外,vee-validate还提供了一些其他特性,如异步验证、条件验证等。异步验证允许我们在前端与后端进行交互,例如验证用户名是否已存在于数据库中。条件验证允许我们在特定的条件下进行验证,以满足复杂的验证需求。 总结来说,vee-validate是一款功能强大同时易于使用和灵活的表单验证插件。无论是简单的还是复杂的验证需求,vee-validate都能够提供良好的解决方案。它为我们开发表单功能提供了便利和可靠性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值