表单验证很麻烦？这篇文章教你如何简化表单验证及错误信息提示的实现

最新推荐文章于 2023-11-26 16:30:52 发布

原创

最新推荐文章于 2023-11-26 16:30:52 发布 · 1.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vuetify #表单验证 #简化表单验证及错误信息提示

Vuetify利用表单验证规则，简化表单验证及错误信息提示的实现

背景

一般前端的登录功能都需要写表单验证，一个方面需要写验证规则，限制用户输入；另一方面需要写验证错误的错误提示信息，提高用户的体验度。

效果演示

在这里插入图片描述

传统方式实现弊端

但是如果用原生的H5和js来写，会发现需要写的操作很麻烦，而且都是重复性的操作。无非就是给表单写失去焦点事件，然后进行判断，如果失败，给一个div从display:none设置为display:block，然后显示错误信息，很繁琐。

可以使用Vuetify解决

这里我们使用Vuetify，利用其自带的表单验证规则，来简化表单验证及错误信息提示。

ps：如果不是vue-cli的项目，是普通的H5项目，也可以通过CDN的方式引入Vuetify，使用原生vue来使用Vuetify。

Vuetify的使用可以参看官网：https://vuetifyjs.com/zh-Hans/getting-started/quick-start/

Vuetify的表单验证

实例

Vuetify的所有输入组件都有一个rules属性，该属性带有一系列功能。
在这里插入图片描述

利用Vuetify的rules属性，实现正则验证及错误信息提示

1.在data中写验证规则，实现简单验证

	<v-form ref="form" lazy-validation v-model="valid" >
	    <v-text-field
		   v-model="name"
		   :counter="10"
		   :rules="nameRules"
		   label="Name"
		   required
		></v-text-field>
		
		<v-text-field
		    v-

最低0.47元/天解锁文章