loginwithmailsaddedtochecklist-javascript

登录页面加入邮箱检测功能-JavaScript

在登录页面中加入邮箱检测功能，当用户输入的账号为邮箱时，自动判断邮箱格式是否正确，并给出提示信息。

代码示例：

HTML代码

<label for="username">账号：</label>
<input type="text" id="username" name="username" required>
<span id="email_tip"></span>

JavaScript代码

var username = document.getElementById("username");
var email_tip = document.getElementById("email_tip");

// 给账号输入框绑定输入事件
username.oninput = function() {
  if (/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(username.value)) {
    email_tip.innerHTML = "邮箱格式正确";
    email_tip.style.color = "green";
  } else {
    email_tip.innerHTML = "请输入正确的邮箱格式";
    email_tip.style.color = "red";
  }
};

实现效果：

当输入的账号为邮箱时，会自动检测邮箱格式是否正确，并给出相应提示信息，如下图所示：

注意事项：

• 可以根据实际情况修改提示信息的内容和样式。
• email_tip 的样式可以通过 CSS 来控制。
• 检测正则表达式只是最简单的格式校验，仅供参考，不一定完全正确。真实场景下需要根据业务需求进行调整。