使用vee-validate插件进行表单验证

Bairz_

已于 2022-07-11 14:22:05 修改

阅读量712

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-07-11 14:11:21 首次发布

本文链接：https://blog.csdn.net/Bairzz/article/details/125720069

版权

本文介绍了如何在Vue项目中使用vee-validate进行表单验证。首先，根据Vue版本选择合适的vee-validate版本进行安装。然后，在main.js中全局引入并配置，接着在组件的HTML部分展示如何定义验证规则，例如手机号和同意协议的验证。在组件的script部分，通过success状态判断表单验证是否全部成功，以控制进一步的操作。

摘要由CSDN通过智能技术生成

1、安装

根据Vue选择版本，Vue2可选择2.x或3.x版本，Vue3可选择4.x版本。

  npm i vee-validate

2、使用

(1)在main.js中

// vee-validate插件:表单验证区域
import Vue from 'vue';
import VeeValidate from 'vee-validate';
// 引入中文提示信息
import zh_CN from 'vee-validate/dist/locale/zh_CN'

Vue.use(VeeValidate);

// 表单验证
VeeValidate.Validator.localize('zh_CN', {
  messages: {
    ...zh_CN.messages,
    // 修改内置规则的message，让密码与确认密码相同
    is: (field) => `${field}必须与密码相同`,
  },
    // 给校验的field属性名映射中文名称
    attributes: {
    phone: '手机号',
    code: '验证码',
    password: '密码',
    password1: '确认密码',
    agree: '协议',
  }
});

// 自定义校验规则
VeeValidate.Validator.extend('agree',{
  validate:value => value
})

（2）在组件html中（以手机号和同意协议按钮为例）