Question

我需要验证表单中的电子邮件地址，但需要在验证电子邮件地址后提交表单。所以，真的，我需要一种方法来调用一些Javascript，说“是的，你的电子邮件是有效的（如包含你要查找的所有常用的东西），然后提交表格。我没办法，我需要表单提交表单标题中的操作。

<html>
<head>
<script>

</script>
</head>
<body>

<form method="post" action="/captiveportal-test.php">
   <input name="email" type="text">
   <input name="redirurl" type="hidden" value="$PORTAL_REDIRURL$">
   <input name="mac" type="hidden" value="$CLIENT_MAC$">
   <input name="ip" type="hidden" value="$CLIENT_IP$">

   <input name="accept" type="submit" value="Continue">
</form>

</body>
</html>

有没有人知道如何验证电子邮件地址，如果电子邮件地址包含@符号，则提交（以便所有帖子值都进入指定的操作）？

由于

Answer 1

HTML：

<form id="form" method="post" action="">
    <input class="email" name="email" type="email">
    <input name="accept" type="submit" value="Continue">
</form>

JavaScript的：

function validEmail(email) {
    if (!(email && (typeof email === 'string' || email instanceof String))) return false;
    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 addEvent(el, name, fn) {
    if (el.addEventListener) {
        return el.addEventListener(name, fn, false);
    } else if (el.attachEvent) {
        return el.attachEvent('on' + name, fn);
    }
}

function check(e) {
    e.preventDefault();
    if (!validEmail(document.querySelector('.email').value)) {
        alert('Invalid Email');
        return false;
    }
    form.submit();
}

var form = document.getElementById('form');
addEvent(form, 'submit', check);

演示：http://jsfiddle.net/rurz01Lm/3/

Answer 2

另一种解决方案

<!-- HTML -->
<form method = "post" action = "/captiveportal-test.php">
   <input name = "email" type = "text">
   <input name = "accept" type = "submit" value = "Continue">
</form>

// JavaScript
window.onload = function(){
  var form = document.forms[0],
      pattern = /^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/; 
  form.onsubmit = function(){
    if(!pattern.test(form.email.value)){
      alert("Invalid email"); 
      return false;
    }
  };
};

Working jsBin

表单提交前的字段验证

2 个答案: