vuelidate的表单验证插件的使用

最新推荐文章于 2022-08-14 23:41:49 发布

凉生可可

最新推荐文章于 2022-08-14 23:41:49 发布

阅读量826

点赞数 3

分类专栏：前端 vue 文章标签： vue 表单验证

本文链接：https://blog.csdn.net/weixin_43466871/article/details/86693532

版权

本文介绍了在Vue应用中利用vuelidate插件进行表单验证的方法，包括通过npm安装，导入main.js，以及在组件中绑定数据和触发验证事件。此外，还讲解了如何自定义验证规则，如基于正则表达式和定位器的验证器。

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

在vue中，我们使用vuelidate实现表单验证，达到限制用户输入的目的，以及提交时验证表单的目的。
查看官方文档

可以通过npm安装

	npm install vuelidate --save

然后导入到main.js中

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

绑定数据需要用v-model.trim绑定，使用this.$v.user.user_name.$touch()去触发验证事件，this.$v.user.user_name.required为true时表示验证通过

<template>
	<form>
		<input type="text" class="userName" placeholder="请输入用户名" v-model.trim="user.user_name">
		 <input

关注

专栏目录