HTML表单在IE中不起作用

HTML form not working in IE

本文关键字：不起作用 IE 表单 HTML      更新时间：2023-09-26

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

<!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>

首先，您的脚本标记是错误的

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

它缺少//

您在两个位置调用validate。

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

和

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

应该只有一个。去掉内联的，坚持绑定的。

此外，旧的IE可能会出现方法名称和ID相同的问题。因此，将validate按钮的id更改为id="btnValidate"，看看这是否有什么不同。

我为您创建了一个示例：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]-->

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

我希望它能有所帮助。

相关文章：