vue项目中使用vee-validate+element-ui完成表单校验

2020/10/24 12:37
阅读数 187

vue项目中使用vee-validate+element-ui完成表单校验

安装vee-validate:

npm install vee-validate --save
或者
yarn add vee-validate
两种使用方法
一、在vue项目中main.js文件中直接使用



import Vue from 'vue';
import {
   
    ValidationObserver,ValidationProvider, extend} from 'vee-validate';
import {
   
    required } from 'vee-validate/dist/rules';
extend('email', {
   
   
    ...email,
  	message: '请输入正确邮箱' //这里写你要提示的错误信息
});
// 全局注册
Vue.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider);

二、封装成单独的js文件
在vue项目中src/common下创建validate.js文件

validate.js:
import {
   
    required} from 'vee-validate/dist/rules'
import {
   
    extend } from 'vee-validate'
extend('email', {
   
   
	...email,
	message: '请输入正确邮箱',
})

在main.js引入

import {
   
    ValidationObserver, ValidationProvider} from 'vee-validate';
import './common/validate'
// 全局注册
Vue.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider);

以上任意一种都可以,根据自身情况实现。个人更偏向第二种,跟符合组件化开发。
接下来,在任意组件使用:

<template>
  <ValidationProvider rules="email" v-slot="{ errors }">
    <input v-model="email" type="text">
    <span>{
   
   {
   
    errors[0] }}</span>
  </ValidationProvider>
</template>

<script>
export default {
   
   
    data(){
   
   
        return{
   
   
            email:''
        }
    }
}
</script>

打开页面,输入框中随意输入,弹出错误信息:
在这里插入图片213
我们看到这个样式完全不是我们想要的,这里我们使用element-ui来实现ui效果,vee-validate官网也有列举。这里不进行详细介绍,根据自身情况选择使用。

下载element-ui

npm i element-ui -S

在main.js中:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 注册elementui
Vue.use(ElementUI)

接下来我们就可以随意使用element-ui在组件上,结合el-form中表单验证样式效果就能达成我们想要的验证效果。在组件上:

<el-form ref="form" label-width="120px">
       <ValidationProvider rules="email" v-slot="{ errors }">
         <el-form-item :error="errors[0]" label="Email">
           <el-input v-model="email"></el-input>
         </el-form-item>
      </ValidationProvider>
</el-form>

在这里插入图片描述

样式已经完全达到我们想到的效果,这里可能会疑问为什么我们不直接使用el-form的表单校验算了,而去使用vee-validate第三方插件来完成。

其实在我们在实际写项目中,在表单验证规则这里花费了大量精力,我们作为开发者应该把花在定制表单验证解决方案上的时间最好花在构建应用程序逻辑上,这块方法只是演示了其中的一部分方法,要想实际熟练使用此插件,需要去vee-valida官网进一步学习。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部