余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

使用HTML和Vuejs进行表单验证(html和vuejs表单验证)

xiyangw 2022-11-25 12:21 26 浏览 0 评论

他们说大多数网络应用只是HTML表单。好吧,表单需要验证,谢天谢地,HTML5带有许多优秀的内置表单验证功能,可用于电子邮件,数字,最大值,分钟等。您甚至可以使用模式编写自己的验证规则。在本文中,我将讨论如何在覆盖无聊的默认值时利用HTML5验证,以便您可以根据需要显示验证错误。我将与Vuejs合作,但即使你不使用Vue,你也可以随时跟进。

让我们从Bootstrap示例的Checkout表单的开始,这样我们就不必过于担心样式了。您可以在此处克隆器。设置应如下所示:



使用Vuejs Starter进行HTML验证

默认的HTML5验证不会立即显示所有表单错误。具有讽刺意味的是,一旦用户提交,浏览器实际上就知道所有无效字段,所以现在我们所要做的就是检查它们然后显示我们喜欢的内容。

现在让我们为表单和一个使用Vuejs捕获提交事件的监听器添加一个id。

<form class="needs-validation" id="validated-form">
 <div class="row">
 <div class="col-md-6 mb-3">
 <label for="firstName">First name</label>
 <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
 <div class="invalid-feedback">
 Valid first name is required.
 </div>
 </div>
 <div class="col-md-6 mb-3">
 <label for="lastName">Last name</label>
 <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
 <div class="invalid-feedback">
 Valid last name is required.
 </div>
 </div>
 </div>
 <!-- Rest of the form removed to save space -->
 <button class="btn btn-primary btn-lg btn-block" type="submit" @click.prevent="submitForm()">SUBMIT</button>
</form>

添加事件监听器以提交表单

然后在我们的form-validation.js文件中,我们将初始化Vuejs并创建处理表单提交和验证的方法。

const vueApp = new Vue({
 el: '#validated-form',
 methods: {
 submitForm () {
 if (this.validateForm()) {
 console.log('formValidated');
 //submit form to backend
 }
 },
 validateForm () {
 var formId = 'validated-form';
 var nodes = document.querySelectorAll(`#${formId} :invalid`);
 console.log(nodes);
 return true;
 }
 }
});

这里我们创建了两个方法submitFormvalidateForm。submitForm调用validateForm,如果满足所有验证规则,则返回true。现在,我们从控制日志记录中查看所有无效的表单输入,我们可以找到许多有趣的属性,包括我们可以向用户显示的validationMessage



输入属性无效

接下来,让我们创建将保存每个无效输入的validationErrors的数据属性。然后我们将循环遍历无效输入数组以设置每个输入。

const vueApp = new Vue({
 el: '#validated-form',
 data: function () {
 return {
 validationErrors: {
 firstName: null,
 lastName: null,
 username: null,
 email: null,
 address: null,
 country: null,
 state: null,
 zip: null,
 }
 }
 },
 methods: {
 submitForm () {
 if (this.validateForm()) {
 alert('Form Submitted')
 //submit form to backend
 }
 },
 validateForm () {
 var formId = 'validated-form';
 var nodes = document.querySelectorAll(`#${formId} :invalid`);
 var errorObjectName = 'validationErrors';
 var vm = this; //current vue instance;
 Object.keys(this[errorObjectName]).forEach(key => {
 this[errorObjectName][key] = null
 });
 if (nodes.length > 0) {
 nodes.forEach(node => {
 this[errorObjectName][node.name] = node.validationMessage;
 node.addEventListener('change', function (e) {
 vm.validateForm();
 });
 });
 return false;
 }
 else {
 return true;
 }
 }
 }
});

在这里,我们做了很多事情。我们创建了validationErrors数据属性来保存每个字段的错误消息。validationErrors对象的每个属性对应于要验证的每个表单元素的name属性。因此在validateForm方法中,我们清除任何先前的错误消息,然后遍历无效字段以设置其相应的validationErrors。我们还添加了一个事件侦听器,一旦无效字段发生更改,就会重新验证。

现在我们需要为要验证的每个字段添加名称属性,这在制作表单时非常正常。然后,我们还应该添加将向用户显示错误消息的span元素。

<form class="needs-validation" id="validated-form">
 <div class="row">
 <div class="col-md-6 mb-3">
 <label for="firstName">First name</label>
 <input type="text" class="form-control" name="firstName" placeholder="" value="" required>
 <span class="text-danger" v-if="validationErrors.firstName" v-text="validationErrors.firstName"></span>
 </div>
 <div class="col-md-6 mb-3">
 <label for="lastName">Last name</label>
 <input type="text" class="form-control" name="lastName" placeholder="" value="" required>
 <span class="text-danger" v-if="validationErrors.lastName" v-text="validationErrors.lastName"></span>
 </div>
 </div>
 <div class="mb-3">
 <label for="username">Username</label>
 <div class="input-group">
 <div class="input-group-prepend">
 <span class="input-group-text">@</span>
 </div>
 <input type="text" class="form-control" name="username" placeholder="Username" required>
 <span class="text-danger" v-if="validationErrors.username" style="width: 100%;" v-text="validationErrors.username"></span>
 </div>
 </div>
 <div class="mb-3">
 <label for="email">Email <span class="text-muted">(Optional)</span></label>
 <input type="email" class="form-control" name="email" placeholder="you@example.com">
 <div class="text-danger" v-if="validationErrors.email" style="width: 100%;">
 <span v-text="validationErrors.email"></span>
 </div>
 </div>
 
 <!-- Rest of form hidden for space -->
 <button class="btn btn-primary btn-lg btn-block" type="submit"
 @click.prevent="submitForm()">SUBMIT</button>
</form>

现在,一旦我们提交表单,我们的用户就可以看到他们需要修复的所有验证错误。很酷的是我们已经完成了它而无需引入额外的库来进行验证。现在,因为我们正在利用Vue的数据绑定能力,我们可以从这里获得有关我们希望如何显示错误的创意。


使用HTML5模式

如果我们需要超出可用的验证规则,该怎么办?例如,检查邮政编码是否有效。这就是HTML5模式非常有用的地方,因为我们可以在HTML中编写正则表达式来执行我们需要的任何类型的检查。我觉得有人正在宣誓正常表达,但幸运的是你可以在html5pattern.com找到一大堆有用的正则表达式。

好吧,找到一个正则表达式比我想象的要困难一些。事实证明,他们大多是7位数字。所以[0-9] {13,16}应该可以正常工作。现在我们遇到了一个新问题。关于HTML5模式的错误消息不是很有用,所以我们需要指定自己的。我们需要一种方法来告诉validateForm函数显示什么消息。

<form class="needs-validation" id="validated-form">
 <div class="row">
 <!-- Rest of form hidden for space -->
 
 <div class="col-md-3 mb-3">
 <label for="zip">Zip</label>
 <input type="text" class="form-control" name="zip" placeholder="" pattern="[0-9]{7}" title="Invalid Zip Code" required>
 <span class="text-danger" v-if="validationErrors.zip" style="width: 100%;" v-text="validationErrors.zip"></span>
 </div>
 </div>
 <button class="btn btn-primary btn-lg btn-block" type="submit"
 @click.prevent="submitForm()">SUBMIT</button>
</form>

添加标题和模式属性

然后我们可以在validateForm方法中检查title属性:

validateForm (formId = 'validated-form', errorObjectName = 'validationErrors') {
 var nodes = document.querySelectorAll(`#${formId} :invalid`);
 var vm = this; //current vue instance;
 Object.keys(this[errorObjectName]).forEach(key => {
 this[errorObjectName][key] = null
 });
 if (nodes.length > 0) {
 nodes.forEach(node => {
 if (node.title) {
 this[errorObjectName][node.name] = node.title;
 }
 else {
 this[errorObjectName][node.name] = node.validationMessage;
 }
 node.addEventListener('change', function (e) {
 vm.validateForm(formId, errorObjectName);
 });
 });
 return false;
 }
 else {
 return true;
 }
}

这里我们添加了一个if-else块来检查title属性,如果找不到则只显示默认错误消息。此外,formIderrorObjectName变量现在被传递到validateForm函数,这允许我们在同一个网页上验证我们选择的方式和方式。


我们已经能够为表单验证创建一个简单的约定配置方法。一旦我们在validationErrors对象中指定了表单字段的名称属性,我们的cool validateForm函数就会利用内置的HTML5功能来完成剩下的工作,我们需要做的就是按照我们想要的方式显示错误。一如既往,我希望这有助于某人。

如果您正在使用Vue,则可以使用此代码段快速启动验证,并且它也不应该很难应用于其他前端框架。您还可以 此repo演示网站上找到本文的工作代码。

干杯!

转:https://itnext.io/form-validation-with-html-vuejs-54ec18e473aa

相关推荐

前后端分离 Vue + NodeJS(Koa) + MongoDB实践

作者:前端藏经阁转发链接:https://www.yuque.com/xwifrr/gr8qaw/vr51p4写在前面闲来无事,试了一下Koa,第一次搞感觉还不错,这个项目比较基础但还是比较完整了,...

MongoDB 集群如何工作?

一、什么是“MongoDB”?“MongoDB”是一个开源文档数据库,也是领先的“NoSQL”数据库,分别用“C++”“编程语言”编写,使用带有“Schema”的各种类似JSON的文档,是也分别被认为...

三部搭建mongo,和mongo UI界面

三步搭建mongo,和mongoUI界面安装首先你需要先有一个docker的环境检查你的到docker版本docker--versionDockerversion18.03.1-ce,b...

Mongodb 高可用落地方案

此落地方案,用于实现高可用。复制集这里部署相关的复制集,用于实现MongoDB的高可用。介绍MongoDB复制集用于提供相关的数据副本,当发生硬件或者服务中断的时候,将会从副本中恢复数据,并进行自动...

一次线上事故,我顿悟了MongoDB的精髓

大家好,我是哪吒,最近项目在使用MongoDB作为图片和文档的存储数据库,为啥不直接存MySQL里,还要搭个MongoDB集群,麻不麻烦?让我们一起,一探究竟,继续学习MongoDB分片的理论与实践,...

IDEA中安装MongoDB插件-再也无要nosql manager for mongodb

大家都知道MongoDB数据库作为典型的非关系型数据库被广泛使用,但基于MongoDB的可视化管理工具-nosqlmanagerformongodb也被用的较多,但此软件收费,所以国内的破解一般...

数据库监控软件Lepus安装部署详解

Lepus安装部署一、软件介绍Lepus是一套开源的数据库监控平台,目前已经支持MySQL、Oracle、SQLServer、MongoDB、Redis等数据库的基本监控和告警(MySQL已经支持复...

YAPI:从0搭建API文档管理工具

背景最近在找一款API文档管理工具,之前有用过Swagger、APIManager、Confluence,现在用的还是Confluence。我个人一直不喜欢用Swagger,感觉“代码即文档”,让代...

Mac安装使用MongoDB

下载MongoDB包:https://www.mongodb.com/download-center解压mongodb包手动解压到/usr/local/mongodb文件夹配置Mac环境变量打开环境...

保证数据安全,不可不知道的MongoDB备份与恢复

大家在项目中如果使用MongoDB作为NOsql数据库进行存储,那一定涉及到数据的备份与恢复,下面给大家介绍下:MongoDB数据备份方法在MongoDB中我们使用mongodump命令来备...

MongoDB数据备份、还原脚本和定时任务脚本

备注:mongodump和mongorestore命令需要在MongoDB的安装目录bin下备份脚本备份格式/usr/local/mongodb/bin/mongodump -h ...

等保2.0测评:mongoDB数据库

一、MongoDB介绍MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之间的产...

MongoDB入门实操《一》

什么是MongoDBMongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之...

Python安装PyMongo的方法详细介绍

欢迎点击右上角关注小编,除了分享技术文章之外还有很多福利,私信学习资料可以领取包括不限于Python实战演练、PDF电子文档、面试集锦、学习资料等。前言本文主要给大家介绍的是关于安装PyMongo的...

第四篇:linux系统中mongodb的配置

建议使用普通用户进行以下操作。1、切换到普通用户odysee。2、准备mongodb安装包,自行去官网下载。3、解压安装包并重命名为mongodb4.04、配置mongodbcdmongod...

取消回复欢迎 发表评论: