我想提醒一条错误消息答案

【问题标题】：I want to alert an error message我想提醒一条错误消息
【发布时间】：2018-05-05 05:07:04
【问题描述】：

我目前正在使用警报来告诉用户他们的电子邮件输入是否无效，但我想提醒错误消息。

【问题讨论】：

【解决方案1】：

您可以使用 HTML5 验证来验证电子邮件输入。

<input id="emailinput" type="email" placeholder="Email Address" required/>

'required' 属性使电子邮件在提交之前既是必需的又是正确的格式。

【讨论】：

【解决方案2】：

有几种方法可以验证输入到文本字段中的电子邮件地址；有些更全面，可以操作，有些可以内置。通常，一个简单的 HTML5 验证是快速有效的，并且可以在一行代码中实现。但是，也可以在 JavaScript 中执行此操作，如下所述。

使用内置的 HTML5 属性进行验证

正如 Fin 之前所说：

您可以使用 HTML5 验证来验证电子邮件输入。

<input id="emailinput" type="email" placeholder="Email Address" required/>

'required' 属性使电子邮件在提交之前既是必需的，又是正确的格式。

考虑到这一点，您可以将其添加到您的代码中以生成以下内容：

<!DOCTYPE html>
<html>
<head>
  <title>Form</title>
  <link rel="stylesheet" type="text/css" href="web.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script>
    function logOptions() {
      var s = document.getElementsByName('Interests')[0];
      var text = s.options[s.selectedIndex].text;
      console.log(text);
    }

    function logEmail() {
      console.log(document.getElementById('emailinput').value);
    }

    function myFunction() {
      logOptions();
      logEmail();
    }
  </script>
</head>

<body>
  <h2>Stay up to date with ecommerce trends <br>with Apples's 
  newsletter</h2>
  <h4>Subscribe for free marketing tips</h4>

  <!-- Sign up now button -->
  <div id="container">
  <button id="submitButton" onclick="myFunction()">Sign up now</button>
  </div>

  <!-- <div class="input form"> -->
  <form>
    <input id="emailinput" type="email" placeholder="Email Address" required/>
    <select name="Interests">
    <option value="" disabled selected>Interested in..</option>
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
    <option value="option3">Option3</option>
    <option value="option4">Option4</option>
    </select>
  </form>

  <svg>
    <rect width="40" height="3" style="fill:lightgreen" />
  </svg>
</body>
</html>

JavaScript 验证

您可以将此代码放在文档头部的脚本标签中：

function validateEmail(emailField){
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    if (reg.test(emailField.value) == false) 
    {
        alert('Invalid Email Address');
        return false;
    }
    return true;
}

...并用此行替换您的电子邮件输入字段：

<input type="text" placeholder="Email Address" onblur="validateEmail(this);" />

【讨论】：

【解决方案3】：

只需在电子邮件输入元素下方创建一个跨度

<span id="emailerror"></span>

并改变您对此的警报代码

document.getElementById('emailerror').textContent="input not valid!";

【讨论】：

【解决方案4】：

你可以通过添加一个空的 span 元素来做到这一点例如。 <span id='errorMessage'></span>

在电子邮件输入标签的正下方。然后编辑 function checkEmail() 如下：

  function checkEmail() {
      if (!document.getElementById("emailinput").checkValidity()) {
         alert("input not valid!");
      document.getElementById('errorMessage').innerHTML = "Input not valid";
  }

【讨论】：