HTML DOM Input Email 对象

HTML DOM Input Email 对象代表一个 HTML 表单中的 input 元素，类型为 “email”，允许用户输入一个邮箱地址。

属性

defaultValue

defaultValue 属性表示 input 元素的默认值。修改 value 属性会改变元素的实际值，但不会影响 defaultValue 属性的值。

value

value 属性表示 input 元素的当前值，包含用户输入的文本。

type

type 属性指定 input 元素的类型，此处为 “email”。

name

name 属性为 input 元素指定名字，用于表单提交时命名数据。

disabled

disabled 属性表示 input 元素是否被禁用。如果禁用，元素无法编辑。

required

required 属性表示用户必须填写 input 元素的值，否则表单将无法提交。

max

max 属性表示 input 元素的最大值。对于输入 email 地址的 input 元素，使用 max 属性没有实际意义。

min

min 属性表示 input 元素的最小值。对于输入 email 地址的 input 元素，使用 min 属性没有实际意义。

pattern

pattern 属性为 input 元素指定一个验证规则，使用户输入的值必须符合该规则。对于输入 email 地址的 input 元素，该属性通常设置为正则表达式，以验证邮箱地址的格式是否正确。

方法

checkValidity()

checkValidity() 方法用于验证 input 元素的值是否符合表单验证规则。如果验证通过，该方法返回 true；反之，返回 false。

setCustomValidity()

setCustomValidity() 方法用于设置自定义的错误消息。如果 input 元素的值不符合表单验证规则，将显示此错误消息。如果符合规则，不显示错误消息。

事件

input 事件

当 input 元素的值发生变化时，会触发 input 事件。该事件通常用于实时显示用户输入的字符数、验证字符数是否达到最大限制等。

document.getElementById("email").addEventListener("input", function() {
  // 在这里实现事件处理程序
});

change 事件

当 input 元素的值发生变化后，input 失去焦点后，会触发 change 事件。该事件通常用于比较输入前后的值是否发生变化，或者使用 AJAX 将用户输入发送到服务器端进行处理。

document.getElementById("email").addEventListener("change", function() {
  // 在这里实现事件处理程序
});

示例

以下代码实现了一个简单的表单，用户输入邮箱地址后，点击提交按钮，打印出用户输入的邮箱地址。

<form>
  <label>邮箱地址：<input type="email" id="email"></label>
  <button type="submit">提交</button>
</form>
<script>
  const form = document.querySelector("form");
  const email = document.getElementById("email");
  form.addEventListener("submit", function(event) {
    event.preventDefault();
    console.log("邮箱地址：", email.value);
  });
</script>

结论

HTML DOM Input Email 对象表示一个 HTML 表单中的 input 元素，用于输入邮箱地址。它具有的属性包括 defaultValue、value、type、name、disabled、required、max、min、pattern；具有的方法包括 checkValidity()、setCustomValidity()；具有的事件包括 input 事件、change 事件。正确地使用这些属性、方法、事件可以实现对该元素的有效控制。