数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML 中元素无效时执行脚本？
在本文中，我们将讨论如何在 HTML 中元素无效时运行脚本。我们熟悉 <input> 标签和 <form> 元素。
HTML <form> 元素
HTML 表单用于收集用户输入。通常，用户输入由服务器处理。
<form> ……. </form>
HTML <input> 标签
<input> 标签定义了一个供用户输入数据的字段。<input> 元素是最重要的表单元素。根据 type 属性，<input> 元素可以以多种不同的方式呈现。
<form> <input type= “..” id= “..” > </form>
当可提交的 <input> 元素无效时，将触发 HTML 中的“oninvalid”事件。此事件在提交表单时对于列出任何表单相关的错误非常有用。每个无效的表单控件在表单提交时都会接收到一个 invalid 事件。
以下是 HTML 中在元素无效时执行脚本的一些示例。
示例 1：使用 HTML
在以下示例中，我们使用了 HTML 的 oninvalid 事件
<!DOCTYPE html>
<html>
<body>
<form action="#" method="get">
Name: <input type="text" oninvalid="alert('Fill The Form!');"
Name="Firstname" required>
<input type="submit" value="Submit">
</form>
</body>
</html>
执行上述脚本后，它将生成一个输出，其中包含一个输入字段和一个提交按钮。
如果用户尝试在不输入输入字段的情况下提交表单，则会触发该事件并显示一个警报。
示例 2：使用 Javascript
在以下示例中，我们运行脚本以在无效事件时触发。
<!DOCTYPE html>
<html>
<body>
<form action="#" method="get">
UserName: <input type="text" id="tutorial" Name="UserName" required><br>
Password: <input type="password" name="password">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById("tutorial").oninvalid = function() {mytutorial()};
function mytutorial() {
alert("Fill The Form!");
}
</script>
</body>
</html>
当脚本执行时，将弹出一个窗口，显示用户名和密码的输入类型以及一个提交按钮。
如果用户尝试在不填写输入字段的情况下提交表单，则会触发该事件并显示一个警报。
使用 addEventListener() 方法
EventTarget 接口的 addEventListener() 方法创建一个函数，该函数将在每次将指定的事件发送到目标时被调用。常见的目标包括 Element 或其子元素、Document 和 Window，但任何支持事件的对象都可以是目标。
示例
在以下示例中，我们使用 EventListener() 方法来触发无效事件。
<!DOCTYPE html>
<html>
<body>
<form action="#" method="post">
<p>
<label for="firstname">First name: </label>
<input type="text" id="tutorial" name:"firstname" required><br>
<label for="lastname">Last name: </label>
<input type="text" id="lastname"><br>
<input type="radio" name="sex" value="Male"> Male<br>
<input type="radio" name="sex" value="Female"> Female<br>
<input type="submit" value="Send">
</p>
</form>
<script>
document.getElementById("tutorial").addEventListener("invalid", mytutorial);
function mytutorial() {
alert("Fill The Form!");
}
</script>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含一个用于输入姓氏和名字的字段以及用于选择性别的单选按钮，以及一个发送按钮。
如果用户尝试在不输入详细信息的情况下提交表单，则会触发该事件并显示一个警报。
242 次查看
