js 当必填项为空时不能提交
在JavaScript中，确保必填项不为空是表单验证的一个基本需求。以下是实现这一功能的基础概念、优势、类型、应用场景以及解决方案。
基础概念
表单验证是指在用户提交表单之前，通过客户端脚本（如JavaScript）检查表单字段是否符合特定的要求。对于必填项，验证其是否为空是其中一种常见的验证方式。
优势
- 用户体验：在用户提交表单之前即时反馈错误，避免不必要的页面刷新或服务器请求。
- 数据完整性：确保提交到服务器的数据是完整和有效的，减少服务器端的负担。
- 安全性：虽然客户端验证可以提高用户体验，但不应依赖于此来保证安全性，服务器端仍需进行验证。
类型
- 客户端验证：使用JavaScript在浏览器中进行验证。
- 服务器端验证：在服务器端进行验证，确保数据的安全性和完整性。
应用场景
- 用户注册表单
- 登录表单
- 数据提交表单
解决方案
以下是一个简单的JavaScript示例，展示如何在用户提交表单时检查必填项是否为空：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<script>
function validateForm() {
var inputField = document.getElementById("requiredField").value;
if (inputField === "") {
alert("必填项不能为空");
return false; // 阻止表单提交
}
return true; // 允许表单提交
}
</script>
</head>
<body>
<form onsubmit="return validateForm()">
<label for="requiredField">必填项:</label>
<input type="text" id="requiredField" name="requiredField">
<input type="submit" value="提交">
</form>
</body>
</html>解释
- HTML部分：
- 创建一个表单，包含一个文本输入框和一个提交按钮。
- 表单的
onsubmit事件调用validateForm函数进行验证。
- JavaScript部分：
validateForm函数获取输入框的值。- 如果输入框为空，弹出警告信息并返回
false，阻止表单提交。 - 如果输入框不为空，返回
true，允许表单提交。
进一步优化
- 实时验证：可以在用户输入时实时验证，而不是在提交时才验证。
- 样式提示：可以使用CSS样式来提示用户哪些字段是必填的，或者在验证失败时改变输入框的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<style>
.error {
border: 2px solid red;
}
</style>
<script>
function validateField(field) {
if (field.value === "") {
field.classList.add("error");
} else {
field.classList.remove("error");
}
}
function validateForm() {
var inputField = document.getElementById("requiredField");
if (inputField.value === "") {
alert("必填项不能为空");
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return validateForm()">
<label for="requiredField">必填项:</label>
<input type="text" id="requiredField" name="requiredField" onblur="validateField(this)">
<input type="submit" value="提交">
</form>
</body>
</html>在这个优化版本中，当用户离开输入框时（onblur事件），会调用validateField函数进行实时验证，并根据验证结果添加或移除错误样式。
相关·内容
当必填字段为空时，如何检查出现在必填字段上方的“请填写此字段”消息？
现在，我的cucumber场景似乎完全忽略了空字段，成功地提交了表单。(我正在验证字段是否存在，当手动提交时，表单确实会显示消息)
浏览 5提问于2011-09-15得票数 7
回答已采纳
提交时，当必填字段为空时，我的表单会显示一条错误消息。它会用红色边框突出显示必填字段。所以我需要突出显示部分，但不想显示p:growl。但是p:growl组件另有用途。当必填字段为空时，如何阻止显示p:growl？
浏览 1提问于2012-12-07得票数 0
在此表单中，有几个必填字段。当任何必填字段为空时，将不会提交表单，并且将显示一条验证消息，如："Value is required and not be will“。无论字段是否为空，如何检查/自动执行表单？
浏览 0提问于2013-08-27得票数 2
回答已采纳
5回答
我有两个文本字段作为必填项，其余的字段都是正常的。现在我必须检测enter键并提交表单。我已经这样做了，但问题是，当发生错误(例如:字段为空)时，我必须停止提交表单，但表单仍在提交。但当字段为空时，则不应提交表单。给我点建议?？
即使我在JavaScript文件中创建了单独的函数，我也得到了相同的响应。实际上，我在过去的48小时
浏览 11提问于2010-09-09得票数 0
回答已采纳
2回答
第一个选项卡-帐户Id (必填)默认情况下，提交按钮处于禁用状态，只有在满足验证条件时才会启用。帐户id填满时启用，为空时禁用
First time on second tab =按预期工作。当填写帐户id并至少选择了一项时启用，当未满足任何条件时禁用。现在，<e
浏览 1提问于2019-12-08得票数 1
我正在尝试在woocommerce中设置“business”字段为必填项，但仅当该字段实际显示时才需要。jQuery(document).ready(function () {$address_fi
浏览 4提问于2015-10-13得票数 6
4回答
我得到了一个jquery函数，它控制表单的所有必填字段是否都已填写，如果其中一个必填字段为空，它将取消提交。取消表单提交可以很好地工作，问题是当我在提交失败后提交表单时，它仍然取消表单提交，而当它应该允许提交时，因为所有表单都正确填写，这是代码：
-Cancel是一个布尔值，它指示是否所有表单域都已填充。
浏览 5提问于2012-06-11得票数 0
回答已采纳
我需要有一个表单验证之前，用户可以点击提交按钮。在提交按钮上：-所有必填项-所有数据保存到SharePoint列表-导航到‘谢谢’页面但它只是导航到感谢页面，即使必填字段为空。
浏览 2提问于2018-06-09得票数 2
1回答
浏览器有一个很好的工具提示，当带有required属性的字段没有被填充时，它就会出现。</form>问题是，当用户提交表单时，我禁用了这个提交按钮，这样它就不会被多次提交，并且在提交之后(即使必填字段为空)表单仍然会提交。有没有一个修复方法，让浏览器在提交之前检查必填<
浏览 2提问于2012-07-08得票数 0
我有一个"media_topic“的正则表达式，它应该允许字符和空格，也应该允许空数据，因为它不是必填字段。当我提交而没有输入任何东西时，意味着它应该允许提交，但它正在发生。
浏览 0提问于2017-06-01得票数 0
我知道Bolt只做基于浏览器的验证，但这对于模糊的红色边框不能阻止不好的用户输入的实际情况是不够的。有没有办法强制在提交前填写必填字段，或者如果必填字段仍然为空则停止提交？否则，即使有一个字段属性"required:true“，它仍然可以用空值提交，因此永远不会强制执行，这似乎是违反直觉的。即使是Wordpress也不允许这样做。
浏览 1提问于2014-10-24得票数 0
3回答
在angular 7中，我刚刚创建了一个带有一些字段和提交按钮的表单。在表单中，有一些必填字段。问题是，当我点击submit按钮时，当必填字段为空时，它被提交。control instanceof FormGroup) { }}当我点击提交按钮时，当</em
浏览 22提问于2019-10-25得票数 0
2回答
所以我专门为这个项目编写了HTML和CSS代码。我将表格的某些部分标记为必填项。submit按钮如下所示：当我单击submit时，即使所需的空白处为空，它仍然会跳转到显示已成功提交的页面。我希望它留在该页面上，并显示表单是不完
浏览 0提问于2015-08-30得票数 1
他们收到的表单提交一直是空的。我将代码放在适当的位置，使其中三个字段成为必填字段，并添加了一个验证码表单。当您完成正常流程时，这些措施会阻止空表单提交。然而，他们仍然收到了空的表单提交。我发现如果您在浏览器中直接输入脚本url，例如form-process.php，它会提交没有必填字段或验证码的空表单。提前谢谢你。另外，我是一个php新手，
浏览 0提问于2015-10-08得票数 1
1回答
我有一个注册表单，可以提交表单数据并将其保存到mongo数据库中，没有任何问题。但是，当表单出现错误时，我希望后端脚本返回一个标识问题的字符串，即“所有字段都需要”或“密码不匹配”。这是我在node js中的后端。如果您提交的是空表单，则会如期向后端控制台输出所有字段必填的错误信息。但我不能从前端访问它。这是我在服务器上发布的前端ajax帖子。<code>A1</code&g
浏览 16提问于2019-08-24得票数 0
我试图在AEM CQ对话框提交事件之前运行一些js代码。我在处理下一个事件时做到了： $(document).on("click", ".cq-dialog-submit", function (e) { $(this).closest("form.foundation-form").submit();
}); 这是可行的，但会跳过AEM表单验证，并让<em
浏览 17提问于2021-02-08得票数 0
3回答
我有一个包含必填字段的表单，如下所示： $("#defaultErrors").modal();}
在这种情况下，即使输入"name“为空，表单也会提交。如何让表单验证<e
浏览 0提问于2017-09-02得票数 0
回答已采纳
当提交有错误的表单(例如，必填字段为空)时，重新呈现的表单会松动它的结构。该集合是在PRE_SET_DATA窗体事件中构建的，但在提交时，preSubmit事件«销毁»在PRE_SET_DATA中构建的集合。
我的问题是，有没有办法避免在提交时清空集合？
浏览 1提问于2017-06-14得票数 1
回答已采纳
我有一个用于SharePoint 2013列表的自定义新表单，其中有多个必填字段，当我单击提交时，表单验证工作正常，如果任何必填字段为空，它将以红色显示错误“您必须为此必填字段指定一个值。”问题是，如果我将DateTime字段标记为必填，则强制验证不起作用，properly.It不会验证所有必填字段，并在提交/添加新记录时以红色显示消息。这只在使用自定义表单时才会出现问题
浏览 28提问于2019-11-21得票数 0
云服务器
ICP备案
云直播
对象存储
实时音视频
腾讯云开发者
