Question

我有一个表单，只允许带有“.edu”域名的电子邮件地址，我编写了一些JavaScript来尝试实现这一目标。

表单元素：

<input type="text" name="empEmail" id="empEmail" />
<input type="submit" name="submit" id="submit" value="submit"  onClick = "error();" />
<span id="empEmailError"> </span>

JavaScript函数：

//Check for non-university e-mail addresses
function error() {
var email = document.getElementById('empEmail').value;
var re = /\.edu$/;
if(!email.match(re)) 
  {
      document.getElementById('empEmailError').innerHTML = "University e-mail 
      address only.";
      return false;
  }
}

这是小提琴：

http://jsfiddle.net/4T5qV/

我无法让它发挥作用。不知道我错过了什么。

Answer 1

您必须使用.test()。

if(!re.test(email))

.test()返回正则表达式是否匹配。

此外，您必须使用小提琴的<wrap in head>选项

Demo

Answer 2

有一个问题，它没有找到error功能。可能是它将error函数放在document.on('loaded')函数中或类似于jsFiddle中的函数。

所以解决方法是向window添加一个函数，如下所示：

//Check for non-university e-mail addresses
window.validateEduAddress = function() {
    var email = document.getElementById('empEmail').value;
    var re = /\.edu$/;
    if(!email.match(re)) {
        document.getElementById('empEmailError').innerHTML = "University e-mail address only.";
        return false;
    } else {
        console.log('woohoo');
    }
}

然后在您的html中，您需要告诉onclick使用该功能：

<input type="submit" name="submit" value="submit" id="submit" onclick="validateEduAddress();" />

为了让它更容易，继续更新jsFiddle

一般情况下，您还应该尽量避免命名函数，因此您应该尝试描述事件或功能，而不是error或fail。

Answer 3

正如其他人所说，此问题的原因是您在jsfiddle中选择了onLoad选项，结果是您的内联onclick处理程序无法找到您的error函数。这部分是使用内联事件处理程序（将JavaScript直接放在属性中）的错误，这不是推荐的做法。

另一个问题是你在其中一个字符串值的中间有一个换行符，这会导致语法错误并阻止代码运行。

你应该在＆lt; head＆gt;＆＃34;中使用＆＃34; no wrap;选项，以及不引人注目的JavaScript。

从元素中删除onclick属性：

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

并使用此：

function validate(e) {
    var email = document.getElementById('empEmail').value,
        re = /\.edu$/;
    if (re.test(email)) {
        document.getElementById('empEmailError').innerHTML = 
                                     "University e-mail address only.";
        return false;
    }
    return true;
}

window.onload = function () {
    var form = document.getElementById('submit').onclick = validate;
};

（我在这里使用re.test()作为Amit建议，因为在这种情况下，这在语义上更有意义。）

http://jsfiddle.net/4T5qV/6/

JavaScript：搜索表达式的字符串，如果找不到则返回错误

3 个答案: