开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Javascript禁用按钮，直到3个或更多输入字段有值为止

基础概念

在前端开发中，禁用按钮直到满足特定条件（如输入字段有值）是一种常见的交互设计。这种设计可以防止用户在数据不完整的情况下提交表单，从而提高数据的准确性和完整性。

相关优势

数据完整性：确保用户在提交表单之前已经填写了所有必要的信息。
用户体验：通过禁用按钮，明确告知用户哪些操作是可用的，避免用户误操作。
防止错误提交：减少因数据不完整而导致的错误提交，减轻服务器负担。

类型

这种功能通常通过JavaScript来实现，主要涉及到DOM操作和事件监听。

应用场景

适用于任何需要用户填写多个输入字段的表单，如注册、登录、提交订单等。

实现方法

以下是一个简单的示例代码，展示如何使用JavaScript禁用按钮直到3个或更多输入字段有值为止：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disable Button Until Fields Filled</title>
</head>
<body>
    <form>
        <input type="text" id="field1" placeholder="Field 1">
        <input type="text" id="field2" placeholder="Field 2">
        <input type="text" id="field3" placeholder="Field 3">
        <button type="submit" id="submitButton" disabled>Submit</button>
    </form>

    <script>
        const fields = document.querySelectorAll('input');
        const submitButton = document.getElementById('submitButton');

        function checkFields() {
            let filledCount = 0;
            fields.forEach(field => {
                if (field.value.trim() !== '') {
                    filledCount++;
                }
            });

            if (filledCount >= 3) {
                submitButton.disabled = false;
            } else {
                submitButton.disabled = true;
            }
        }

        fields.forEach(field => {
            field.addEventListener('input', checkFields);
        });
    </script>
</body>
</html>

解释

HTML部分：创建了三个输入字段和一个提交按钮，并将按钮初始设置为禁用状态。
JavaScript部分：
- 获取所有输入字段和提交按钮的引用。
- 定义一个checkFields函数，用于检查输入字段是否有值，并根据结果启用或禁用提交按钮。
- 为每个输入字段添加input事件监听器，当用户输入时调用checkFields函数。

参考链接

MDN Web Docs: EventTarget.addEventListener()

通过这种方式，可以有效地禁用按钮直到3个或更多输入字段有值为止，从而提高表单的数据完整性和用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

表单常用的控件有哪些_html表单控件样式修改

readonly属性规定输入字段为只读（不能修改）； readonly属性不需要值，它等同于readonly=“readonly”。

02

JavaScript(十三)

这一篇，我们说说表单。 JavaScript 最初的一个应用，就是分担服务器处理表单的责任。

02

HTML 表单和约束验证的完整指南

在本文中，我们将研究 HTML 表单字段和 HTML5 提供的验证选项。我们还将研究如何通过使用 CSS 和 JavaScript 来增强这些功能。

04

JavaScript 编程精解中文第三版十八、HTTP 和表单

我们曾在第 13 章中提到过超文本传输协议（HTTP），万维网中通过该协议进行数据请求和传输。在本章中会对该协议进行详细介绍，并解释浏览器中 JavaScript 访问 HTTP 的方式。

02

表单脚本

刚开始人们使用JavaScript，最主要的目的之一就是表单的验证，分担服务器处理表单的责任。虽然现流行的大部分提交方式是通过ajax，但了解表单，对于ajax方式也是有重大帮助的！所以，大家不要看轻表单。

04

20条Web测试基于实际测试的功能测试点总结

1、功能相关性：删除/增加一项会不会对其他项产生影响，如产品影响，这些影响是否正确（常见的错误是：增加某个数据记录后，如果该记录某个字段值内容过长，可能在查询的时候让数据例表变形）

03

form表单提交的几种方式

完成后启动项目并访问http://localhost:8080/query.html 输入用户名和密码

02

JavaScript表单基础

我们应该知道JavaScript设计的的初衷很大程度上是为了处理表单验证，因为在那个远古时代表单验证是通过后台来验证的，网速都比较慢，我们向后台发送数据都需要很长时间才能接收返回数据，动则几分钟少则几十秒，用户体验极其不佳。JavaScript在设计在网页校验，直接就能告诉用户结果，它还增加了很多表单控件的默认行为，这直接让这门语言火了起来。

02

详细介绍 AngularJS 表单的各种特性、用法和最佳实践

AngularJS 是一款强大的 JavaScript 前端框架，提供了丰富的功能和工具，其中之一就是表单处理。表单是 Web 应用程序中常见的用户输入和数据交互方式，AngularJS 提供了便捷且强大的表单处理机制，使开发者能够轻松地构建、验证和处理表单数据。本文将详细介绍 AngularJS 表单的各种特性、用法和最佳实践。

03

26个你需要学习的Firefox配置技巧，改进体验和加快浏览器响应速度

当你在Firefox的URL栏中键入about:config时，会看到一个免责声明:“Here be dragons”，它警告你，在这个区域进行调整主要是实验性的，可能会导致浏览器不稳定

02

ASP.NET MVC 5 - 给数据模型添加校验器

在本节中将会给Movie模型添加验证逻辑。并且确保这些验证规则在用户创建或编辑电影时被执行。拒绝重复 DRY ASP.NET MVC 的核心设计信条之一是DRY: "不要重复自己（DRY --Don’t Repeat Yourself）"。ASP.NET MVC鼓励您指定功能或者行为，只做一次，然后将它应用到应用程序的各个地方。这可以减少您需要编写的代码量，并减少代码出错率，易于代码维护。给ASP.NET MVC 和 Entity Framework Code First 提供验证支持是 DRY 信条的

07

深入讲解 ASP+ 验证

这篇文章详细讲解了 ASP+ 验证控件的工作方式。如果要生成其中包含验证控件的复杂页面，或是要扩展验证框架，建议您阅读本文。如果要学习使用验证控件，或是要决定是否使用验证控件，请参见“ASP+ 中的用户输入验证（英文）”。

01

JavaScript 表单处理

为了分担服务器处理表单的压力，JavaScript提供了一些解决方案，从而大大打破了处处依赖服务器的局面。一．表单介绍在HTML中，表单是由<form>元素来表示的，而在JavaScript中，表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因此它拥有HTML元素具有的默认属性，并且还独有自己的属性和方法： HTMLFormElement属性和方法属性或方法说明 acceptCharset 服务器能够处理

如何在十分钟内创建一个Chrome 插件

曾经想过制作自己的Chrome扩展，却因为觉得过程太复杂而打消了念头吗？好消息，事情并没有你想象的那么复杂！在接下来的几分钟里，我们不仅将为你详解Chrome扩展的基础知识，还将手把手教你如何用五个简单的步骤创建自己的扩展。

05

一张图解析 FastAdmin 中的表格列表

该图片取自 fastadmin 问答区: https://ask.fastadmin.net/article/323.html

01

HTML学习笔记二

< input >标签元素最重要的是表单元素，标签根据不同的 type 属性，有多态性。

02

Asp.Net MVC4入门指南（8）：给数据模型添加校验器

在本节中将会给Movie模型添加验证逻辑。并且确保这些验证规则在用户创建或编辑电影时被执行。保持事情 DRY ASP.NET MVC 的核心设计信条之一是DRY: "不要重复自己（Don’t Repeat Yourself）"。ASP.NET MVC鼓励您指定功能或者行为，只做一次，然后将它应用到应用程序的各个地方。这可以减少您需要编写的代码量，并减少代码出错率，易于代码维护。给ASP.NET MVC 和 Entity Framework Code First 提供验证支持是 DRY 信条的一次伟大实践

如何白嫖微软的文本转语音

你好，我是征哥，之前分享过微软的文本转语音服务，已经听不出是机器了，很多人惊叹于它的强大，希望能把自己的文字转成语音，做为视频或文章的配音，今天就来分享如何白嫖微软的文本转语音。

01

JSP 防止网页刷新重复提交数据

if session("ok")=true then response.write "错误，正在提交" response.end end if

02

HTML 表单 (form) 的作用解释

参考网址：《HTML中form表单作用解释》表单在网页中主要负责的是数据采集功能，一个表单基本由三部分组成：表单标签：这里面包含了处理表单数据所用 CGI （Common Ga

07

如何使用FormKit构建Vue.Js表单

在本文中，我们将探讨使用FormKit的好处，并提供一个逐步指南，教你如何使用这个强大的工具构建表单。请继续阅读，了解FormKit如何帮助您简化表单构建过程，更快地构建更好的表单！

01

6.HTML输入表单标签元素介绍

描述: 表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容,其包含文本框、文本域(textarea)、按钮、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等元素都要放在form标签里面或者进行form的id值的调用，否则提交的数据到不了后端。

01

使用HTML和CSS编写无JavaScript的Todo应用

本文介绍了一个使用HTML、CSS和JavaScript实现的无JavaScript的Todo应用。通过使用CSS的伪类选择器，可以实现添加、删除、编辑和标记任务的功能。同时，通过存储和访问数据，可以在不依赖JavaScript的情况下进行实时更新。

07

趣图：会 JS 了不起啊！

简单大概的说出来就可以了，不要详细到你哪年进入公司，哪年离开公司，负责项目做什么的，说一大通。这个对我们面试官来说，想让你自我简单介绍，其实考察点有两方面：

03

图书列表案例

1.图书列表静态列表效果基于数据实现模板效果处理每行的操作按钮（禁止默认行为） 1、提供的静态数据数据存放在vue 中 data 属性中 var vm = new Vue({ el: '#app', data: { books: [{ id: 1, name: '三国演义', date: '' },{ id: 2, n

05

使用HTML和CSS编写无JavaScript的Todo应用

用css实现一个todo应用程序，但不是TodoMVC那样的设计，它不使用JavaScript，而是所有的交互都是由CSS驱动的。

02

HTML 笔记

1. 什么是HTML？超文本标记语言, <标签名>--标记（标签、节点） 2. HTML是由：标签和内容构成

06

关于Laravel-admin的基础用法总结和自定义model详解

以上这篇关于Laravel-admin的基础用法总结和自定义model详解就是小编分享给大家的全部内容了，希望能给大家一个参考。

02

ASP.NETCore学习资料

ASP.NET Core(ASP.NET Core 简介) ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。

02

Layui常用功能整理

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

02

JavaScript 各种事件触发总结

鼠标 Click: 鼠标在一个对象上左键点击触发Click事件,对象包括button,document,checkbox,link,radio,submit.

01

VisualStudio 断点调试详解

本文详细告诉大家 VisualStudio 断点调试的功能和使用方法，本文使用的是最新 VisualStudio2019 的功能，也许在你看到这篇博客的时候这个版本已经过时

02

Code Embed：在WordPress文章和页面中添加Javascript的最佳插件

自从又开始迷上了WordPress，每天都会花不少时间在WordPress相关的网站上闲逛，这感觉竟然有点像分手复合又陷入了热恋的情人，没事就腻歪在一起，要把之前错过的时间都补回来。。。

04

原创丨JavaScript 逆向过程中无限 Debug 的绕过方案

这是「进击的Coder」的第 608 篇技术分享作者：崔庆才在做爬虫的时候，我们经常会在代码里面遇见 debugger 这么一个关键字。debugger 是 JavaScript 中定义的一个专门用于断点调试的关键字，只要遇到它，JavaScript 的执行便会在此处中断，进入调试模式。有了 debugger 这个关键字，我们可以非常方便地对 JavaScript 代码进行调试，比如使用 JavaScript Hook 时，我们可以加入 debugger 关键字，使其在关键的位置停下来，以便查找逆向

05

新建Salesforce的自定义对象和自定义字段

Salesforce默认提供了很多功能，可以用于销售、市场开发、客服等。为了实现这些功能，Salesforce提供了一系列的标准对象，比如“客户”（Account）、“个案”（Case）、“解决方案”（Solution）等等。用户也可以创建自定义对象。

06

如何使用CSS伪类选择器

原文链接：https://www.sitepoint.com/css-is-where-has-pseudo-class-selectors/[1]

04

【JavaScript】JavaScript 简介 ③ ( JavaScript 单行/多行注释 | 输入输出语句 | prompt 函数 | alert 函数 | console.log 函数 )

JavaScript 脚本语言中 , 使用 // 符号来进行单行注释 , 在该符号之后的任何内容 , 直到行尾 , 都不会被 JavaScript 解释器执行 ;

01

AngularDart Material Design 选择顶

可以手动（在模板中）或通过SelectionOptions实例指定选项。可以通过模板或通过检查选择模型将选项标记为已选择。

02

php注册系统和使用Xajax即时验证用户名是否被占用

主要的应用有网页的即时、不刷新的登录系统也可以利用于注册系统中即时验证用户名是否被占用

03

JavaScript中的三种弹出框

JavaScript中有三种弹出框，alert()，confirm(), prompt()。

00

图书列表案例

图书列表案例静态列表效果基于数据实现模板效果处理每行的操作按钮 1、提供的静态数据数据存放在vue 中 data 属性中 var vm = new Vue({

01

selenium--chrome配置参数

about:version - 显示当前版本 about:memory - 显示本机浏览器内存使用状况　　 about:plugins - 显示已安装插件　　 about:histograms - 显示历史记录　　 about:dns - 显示DNS状态　　 about:cache - 显示缓存页面　　 about:gpu -是否有硬件加速　　 about:flags -开启一些插件 //使用后弹出这么些东西：“请小心，这些实验可能有风险”，不知会不会搞乱俺的配置啊！ chrome://extensions

01

那些你从不使用的 HTML 属性，背后竟然大有文章，赶快了来了解下

快速总结 ↬ 在这篇文章中，Louis Lazaris 描述并演示了一些有趣的 HTML 属性，您可能听说过也可能没有听说过，并且可能会发现它们非常有用，可以在您的项目中亲自使用。

03

一篇文章带你了解JavaScript弹出框

警告框是最简单的弹出框。它使可以向用户显示一条短消息。还包括“确定”按钮，用户必须单击此“确定”按钮才能继续。

03

html教程之form表单元素

<form action="post.php" method="post" target="_self" autocomplete="off" enctype="multipart/form-data" >

01

你不知道的HTML

我的答案很简单：HTML。而且我一点也没有讽刺或嘲弄。当然，我非常清楚在哪些情况下使用哪些标签，以及如何使我的 HTML 大部分具有语义性和可访问性。

HTML 基础

超文本标记语言 (HTML, HyperText Markup Language) ，是构成网页的最基础的内容，用来创建并以可视化方式来呈现网页，它确定了一个网页的内容而不是功能

03

数据产品PRD设计规范（一）：表格设计

表格是B端产品尤其是数据产品中，最常用的信息展现形态，比如商品列表、订单列表、用户列表，用户行为分析系统的事件列表、指标列表，DMP平台的标签列表、场景列表等，可以说B端产品40%以上的页面是由表格构成。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭