vuelidate对于vueJs2.0验证的示例分析

这篇文章将为大家详细讲解有关vuelidate对于vueJs2.0验证的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

鲁山ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

介绍

在后端项目里比如我们的Laravel框架对于表单验证有自己的一套validation机制他将验证集成在FormRequest

我们只需要在我们的方法中依赖注入我们自己实例化后的验证类当然也可以直接去在方法里去验证表单数据

而在我们的前端的项目里也就是在我们的vue项目里也有比较好的验证解决方案也就是这的vuelidate

1.安装

和我们安装前端包一样在项目终端执行:

$ npm install vuelidate --save

安装完成后和我们去使用vuex一样在main.js去引入声明这个package:

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

当然你也可以在需要用到验证的组件里去引用一个相对小的版本:

import { validationMixin } from 'vuelidate'

var Component = Vue.extend({
 mixins: [validationMixin],
 validation: { ... }
})

如果你偏好通过require这样的形式你也可以这样引入:

const { validationMixin, default: Vuelidate } = require('vuelidate')
const { required, minLength } = require('vuelidate/lib/validators')

2.使用

其实使用起来真的很方便下面举例来说就是在我的项目里的使用

1.注册验证

在用户注册时我们通常的需要处理的表单字段就是name,email,password,confirm_pwd

首先我在Register.vue这个组件文件中把基本的样式结构写好这取决于每个人

接着是我们对表单数据的验证:

这里是对用户名和邮箱的验证就像之前提到的我们先引入我们的验证规则:

import { required,minLength,between,email } from 'vuelidate/lib/validators'

因为我是对一个新用户的注册所以我定义一个data

 data(){
  return{
    newUser: {
      name:'',
      email:'',
      password:'',
      confirm_pwd:''
    },
  }
},

接着去定义我们的验证字段的规则:

validations: {
  newUser:{
    name: {
      required,
      minLength: minLength(2)
    },
    email: {
      required,email
    }
  }
},

定义这些验证规则之后下面是我的html部分内容


用户名

用户名不能为空用户名不能太短

邮箱

邮箱不能为空请填写正确的邮箱格式

每个人可以都不一样官方文档上也给出了demo:


 
  Flat A
  
 
Field is required.
 
  Flat B

.form-group__message{ display: none; font-size: .95rem; color: #CC3333; margin-left: 10em; margin-bottom: 12px; } .form-group--error+.form-group__message { display: block; color: #CC3333; } .form-group--error input, .form-group--error input:focus, .form-group--error input:hover, .form-group--error textarea { border-color: #CC3333; }

name: { required, minLength: minLength(4), async isUnique (value) { if (value === '') return true const response = await fetch(`http://localhost:8000/api/unique/name/${value}`) return Boolean(await response.json()) } },

//用户验证路由 Route::group(['prefix'=>'unique','middleware'=>['api','cors']], function () { Route::get('/name/{value}',function(Request $request,$value){ if($value==="gavin"){ return response()->json(false); } return response()->json(true); }); });

vuelidate对于vueJs2.0验证的示例分析

其他资讯