数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究HTML5 中使用 required 属性和自定义验证消息
HTML5 包含许多内置的表单验证功能，允许开发者轻松地向表单添加验证。其中一项功能是“required”属性，它指定输入字段是必需的，并且必须在提交表单之前填写。
“required”属性是一个布尔属性。如果表单中存在任何带有“required”属性的输入字段，则必须在提交表单之前填写该字段。
如果在提交表单之前该特定字段为空，则用户将看到浏览器发出的错误消息，告知他们该输入字段是必需的。
使用“required”属性
要使用“required”属性，只需将其添加到要设置为必需的输入字段中即可：
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" required>
</form>
</body>
</html>
浏览器将在提交表单之前验证输入字段是否已填写，如果未填写，则会显示错误消息。根据浏览器的不同，默认错误消息可能有所不同，但通常会说明该字段是必需的。
自定义验证消息
我们还可以通过指定一个唯一的消息来更改无效输入的消息，该消息将在字段无效时发送给用户。我们可以使用“title”属性更改默认的验证消息：
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" id="name" required title="Please enter your name">
</form>
</body>
</html>
如果在提交表单时输入字段为空，则此代码将向用户显示消息“请输入您的姓名”。
除了“title”属性之外，HTML5 还提供了“pattern”元素，允许开发人员指定输入必须匹配的正则表达式，以便在每次填写表单时进行验证。如果输入不符合所需的模式，用户将看到浏览器发出的错误消息。
示例
以下是如何使用“pattern”属性指定输入字段的最小长度的示例：
<html>
<body>
<form>
<label for="name">Name:</label>
<input type="text" required pattern=".{3,}" title="Please enter at least 3 characters">
</form>
</body>
</html>
如果输入不符合此条件，则将显示消息“请输入至少 3 个字符”。此代码要求输入字段包含至少 3 个字符。
自定义错误消息样式
可以使用 CSS 更改错误消息的外观。错误消息默认情况下作为一个小文本节点添加到输入字段中，并以红色字体显示。但是，我们可以使用 CSS 修改错误消息的外观并控制其显示方式。
可以使用“:invalid”伪类在输入字段无效时选择它，并使用 CSS 属性更改错误消息的样式。
示例
以下是如何使用 CSS 自定义错误消息样式的示例：
<html>
<style>
input:invalid {
border: 2px solid red;
}
input:invalid + span {
color: red;
font-weight: bold;
}
</style>
<body>
<form>
<label for="name">Name:</label>
<input type="text" required pattern=".{3,}" title="Please enter at least 3 characters">
</form>
</body>
</html>
当输入字段无效时，此代码将使其边框变为红色，并显示一个粗体红色错误消息。
使用 JavaScript 自定义错误消息
除了使用 CSS 之外，我们还可以使用 JavaScript 自定义错误消息并控制其显示方式。
要使用 JavaScript 自定义错误消息，我们可以使用“setCustomValidity”方法，该方法允许我们为输入字段指定自定义错误消息。
示例
以下是如何使用“setCustomValidity”方法设置自定义错误消息的示例：
<html>
<body>
<h2>JavaScript Validation</h2>
<p>Enter a number and click OK:</p>
<input id="InputField" type="text" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
const txt = document.getElementById("InputField").value;
console.log(txt);
const txtLen = txt.length;
console.log(txtLen);
if (txtLen<3) {
document.getElementById("demo").innerHTML = "Must be atleast 3 characters";
} else {
document.getElementById("demo").innerHTML = "Input OK";
}
}
</script>
</body>
</html>
此代码将输入字段的错误消息设置为“请输入有效值”。
结论
在这篇文章中，我们探讨了如何将个性化的验证消息与 HTML5 的“required”元素结合使用。我们讨论了表单验证的基础知识、“required”标签以及如何使用 JavaScript 和 CSS 来个性化验证消息。
开发人员可以通过利用“required”元素并自定义验证消息，轻松地向其 HTML5 表单添加表单验证，并确保用户提供了必要的信息。表单验证是保证用户输入的准确性和完整性的重要工具，许多 Web 应用程序都依赖于它。
18K+ 浏览量
