Question

我创建了一个表单，用于检查电子邮件地址是否有效，并相应地输出VALID或INVALID。我的问题是它在Internet Explorer中不起作用，这令人非常沮丧。我的代码如下：

<!DOCTYPE html>
<html>
<head>
    <script class="jsbin" src="http:ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">  </script>
    <meta charset=utf-8 />
    <title>Email Validation</title>
</head>
<body>
    <form onSubmit='validate(); return false;'>
        <p>Enter an email address:</p>
        <input id='email' placeholder="example@example.com" size="21" />
        <button type='submit' id='validate'>Submit</button>
        <button type='reset' value='reset'>Reset</button>
    </form>
    <br/>
    <h2 id='result'></h2>
    <script>
        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]{1,}))$/;
            return re.test(email);
        }
        function validate(){
            $("#result").text("");
            var email = $("#email").val();
            if (validateEmail(email)) {
                $("#result").text(email + " is valid");
                $("#result").css("color", "green");
            } else {
                $("#result").text(email + " is not valid");
                $("#result").css("color", "red");
            }
            return false;
        }
        $("form").bind("submit", validate);
    </script>
</body>
</html>

Answer 1

首先你的脚本标签是错误的

<script class="jsbin" src="http:ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">  </script>
                           ^^^^^^

缺少//

您在两个地方调用验证。

<form onSubmit='validate(); return false;'>

和

$("form").bind("submit", validate);

应该只有一个。摆脱内联一个并坚持绑定一个。

此外，较旧的IE可能会遇到方法名称和ID相同的问题。因此，将验证按钮的ID更改为id="btnValidate"，看看是否有任何区别。

Answer 2

我为您创建了一个示例：http://jsfiddle.net/ctw44q9w/

$(document).ready(function(){
    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]{1,}))$/;
        return re.test(email);
    }

    function validate(email){
        $("#result").text("");
        if (validateEmail(email)) {
            $("#result").text(email + " is valid");
            $("#result").css("color", "green");
        } else {
            $("#result").text(email + " is not valid");
            $("#result").css("color", "red");
        }
     }

    $('#validate').on('click', function(){
        validate($('#email').val());
    });
});


<p>Enter an email address:</p>
<input id='email' placeholder="example@example.com" size="21">
    <button type='submit' id='validate'>Submit</button>
    <button type='reset' value='reset'>Reset</button>

    <br/>
<h2 id='result'></h2>

此外，我已删除了onclick()（这是一种不好的做法），我设置为on() jquery。您正在使用的jquery版本非常重要（1.11.2应该没问题），因此请确保您使用的版本与IE兼容。

我建议你用这个来获得工作的IE

<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

注意：为您需要的版本设置。

我希望它有所帮助。

HTML表单在IE中不起作用

2 个答案: