Question

我有以下带有CSS和Javascript的HTML脚本。我有一个简单的javascript函数，可以验证我输入的电子邮件。但是javascript函数根本不会被调用。有人可以帮忙吗？

function validateForm() {
  var x = document.getElementById("email").value;
  alert(x);
  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf(".");
  if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
    alert("Not a valid e-mail address");
    return false;
  }
}

<h1>DELIVERY DETAILS</h1>

<form id="deliveryDetails">
  First name:<br>
  <input type="text" name="firstname"><br> Last name:<br>
  <input type="text" name="lastname"><br> e-mail:
  <br>
  <input type="text" id="email"><br> telephone number:<br>
  <input type="text" name="telephone number"><br> order number:<br>
  <input type="text" name="order number"><br> order date:<br>
  <input type="text" name="order date"><br><br>
  <input type="submit" value="submit" onsumbmit="return validateForm();">

</form>

Answer 1

“提交”按钮没有onsubmit事件，表单没有，而是将事件添加到表单，并且代码得到执行：

function validateForm() {
  var x = document.getElementById("email").value;
  alert(x);
  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf(".");
  if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
    alert("Not a valid e-mail address");
    return false;
  }
}

<h1>DELIVERY DETAILS</h1>

<form id="deliveryDetails" onsubmit="return validateForm();">
  First name:<br>
  <input type="text" name="firstname"><br> Last name:<br>
  <input type="text" name="lastname"><br> e-mail:
  <br>
  <input type="text" id="email"><br> telephone number:<br>
  <input type="text" name="telephone number"><br> order number:<br>
  <input type="text" name="order number"><br> order date:<br>
  <input type="text" name="order date"><br><br>
  <input type="submit" value="submit" >
</form>

Answer 2

当然，我相信您可以利用HTML5的优势，可以使用input email类型并使用CSS进行验证：

<input class="email" type="email"/>

并为CSS或valid输入相关的invalid：

.email:valid {
    color: green; //for example
}

.email:invalid {
    color: red; //for example
}

但是在您的情况下，我没有阅读您的函数，也不知道您为什么不使用RegExp进行支票验证。

您可以将click事件绑定到提交按钮：

<input id="submit" type="submit" value="submit"/>

并用于附加点击事件：

document.getElementById('submit').addEventListener(`click`,() => {
    validateForm();
}, false);

您的validateForm未优化。你可以这样写：

const validForm = (emailString) => {
    return /^[a-z0-9][a-z0-9-_\.]+@([a-z]|[a-z0-9]?[a-z0-9-]+[a-z0-9])\.[a-z0-9]{2,10}(?:\.[a-z]{2,10})?$/.test(emailString);
}

Answer 3

onsumbmit="return validateForm();"

登场？您在那发明了一个词。在任何情况下，该事件都不会触发该函数，因为onsumbmit不是有效事件。

此外，将事件放置在表单（“拥有”事件）而不是按钮上。即

<form id="deliveryDetails" onsubmit="return validateForm();">

Answer 4

您可以将类型设置为电子邮件，而无需任何其他验证码，例如

<input type="email"  required/>

或使用正则表达式

        function validateEmail(email) {
            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }

    function validate() {
      var email = $("#email").val();

      if (validateEmail(email)) {

      }

$("#validate").bind("click", validate);

HTML

<form>
  <p>Enter an email address:</p>
  <input type="text" id='email'>
  <button type='submit' id='validate'>Validate!</button>
</form>

Answer 5

使用button type ="submit"并使用preventDefault阻止按钮的默认行为

function validateForm(e) {
  e.preventDefault();
  var x = document.getElementById("email").value;
  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf(".");
  if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
    alert("Not a valid e-mail address");
    return false;
  }
}

<h1>DELIVERY DETAILS</h1>
<form id="deliveryDetails">
  First name:<br>
  <input type="text" name="firstname"><br> Last name:<br>
  <input type="text" name="lastname"><br> e-mail:
  <br>
  <input type="text" id="email"><br> telephone number:<br>
  <input type="text" name="telephone number"><br> order number:<br>
  <input type="text" name="order number"><br> order date:<br>
  <input type="text" name="order date"><br><br>
  <button type="submit" onclick="validateForm(event)">Submit</button>
</form>

Javascript-电子邮件验证不起作用

5 个答案: