0

我希望有人可以帮助我的项目学校。我有一段这样的 HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Tambah Guru</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type='text/javascript' src='script.js' charset="utf-8"></script>
    </head>
<body>

Email: <input type='text' id='txtemail' />

<input type='submit' value='Simpan' id='validateemail' />
</body>
</html>

然后我的Javascript代码是：

$(document).ready(function(e) {
    $('#validateemail').click(function() {
        var sEmail = $('#txtemail').val();
        if ($.trim(sEmail).length == 0) {
            alert('Please enter valid email address');
            e.preventDefault();
        }
        if (validateEmail(sEmail)) {
            alert('Email is valid');
        } else {
            alert('Invalid Email Address');
            e.preventDefault();
        }
    });
});

function validateEmail(sEmail) {
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (filter.test(sEmail)) {
        return true;
    } else {
        return false;
    }
}

当我运行它时，它不起作用。我不知道为什么。有人可以帮我吗？

4

2 回答 2

6

您没有像上面的评论中那样添加 jQuery。将此行放在 html 中的脚本行上方

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

然后你没有传入要处理的事件对象。在单击处理程序中传递事件对象，如下面的代码所示。您在 document.ready 中传递了您不需要的事件处理程序。

$(document).ready(function() {
    $('#validateemail').click(function(e) {
        var sEmail = $('#txtemail').val();
        if ($.trim(sEmail).length == 0) {
            alert('Please enter valid email address');
            e.preventDefault();
        }
        if (validateEmail(sEmail)) {
            alert('Email is valid');
        }
        else {
            alert('Invalid Email Address');
            e.preventDefault();
        }
    });
});

function validateEmail(sEmail) {
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (filter.test(sEmail)) {
        return true;
    }
    else {
        return false;
    }
}
于 2013-05-19T05:16:56.933 回答
1

您需要包含 jquery.js 文件，因为它是一个 Javascript 库。您可以下载并包含它，也可以简单地在脚本标签中使用此 url：-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

这是一个更好的选择，因为它具有许多优点，例如减少延迟、增加并行度和更好的缓存。

于 2013-05-19T05:22:24.630 回答