Question

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

Answer 1

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

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

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

Answer 2

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

使用内置HTML5属性验证

正如Fin先前所说：

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

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

＆＃39;要求＆＃39; property使得在提交之前电子邮件既需要并且格式正确。

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

＆＃13;

<!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>

＆＃13;

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);" />

Answer 3

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

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

并改变您的警报代码

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

Answer 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";
  }

我想提醒一条错误信息

4 个答案: