IE 9 中的 Twitter Bootstrap + jQuery 验证问题

Posted 2023-05-08

技术标签:

【中文标题】IE 9 中的 Twitter Bootstrap + jQuery 验证问题【英文标题】：Twitter Bootstrap + jQuery validation issue in IE 9 【发布时间】：2011-12-05 21:39:25 【问题描述】：

我在使用模式显示登录框的页面上使用 twitter bootstrap css 框架（bootstrap-modal.js）。在登录框中，我使用 jquery 非常简单的验证 (jquery.rsv.js) 来验证电子邮件 ID 和密码。问题是验证在 IE 9 的登录模式框中不起作用。在同一页面上，我有另一个不在模式中的表单，并且验证工作正常。

下面是我的引导模式表单代码：-

<div id="modal-from-login" class="modal hide fade">
            <div class="modal-header">
              <a href="#" class="close">&times;</a>
              <h3>Login for existing customers</h3>
            </div>
            <div class="modal-body">

    <form id="loginform" name="loginform" method="post" action="login/">

        <div class="clearfix"><label for="comments">Email ID:</label>
            <input type="text" name="email" id="loginemail" /></div>
        <div class="clearfix"><label for="comments">Password:</label>
            <input type="password" name="password" id="loginpassword" />
    </div>
        </div>

    <div class="modal-footer">
        <input type="submit" style="float:left;margin-left:130px;" name="login" id="login" value="Login" class="btn primary" />
    </div>

</form>
    </div>

这是按钮代码：-

&lt;button class="btn primary" data-controls-modal="modal-from-login" data-backdrop="true" data-keyboard="true" style="margin-top:5px;"&gt;Login&lt;/button&gt;

验证的javascript代码：-


    
    function my_custom_function()
        

          if (document.getElementById("website").value)

        var url = document.getElementById("website").value;
        var test = /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]2)|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]2)|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]2)|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]2)|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]2)|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url);

        var field = document.getElementById("website");

        if(test)
            return true;
        else
         return [[field, "Please enter a valid website."]];
        
       else
        return true;
       
    
$(document).ready(function() 

    function loginComplete()
        return true;
       



    $("#loginform").RSV(
          onCompleteHandler: loginComplete,
                rules: [
                        "required,loginemail,Please enter your email id.",
               "valid_email,loginemail,Please enter a valid email address.",
               "required,loginpassword,Please enter your password."
                       ]
        );

);
</script>

我正在使用 jquery 1.4.2

有什么问题？？此代码在所有其他浏览器中都可以正常工作，即使在 IE8 中也只有在 IE 9 中才会出现问题。

【问题讨论】：

既然你用的是jQuery，那你为什么不用jQuery？！使用 $("#website").val() 而不是 document.getElementById("website").value 您还需要在多行中对同一事物进行 3 次查找。 【参考方案1】：

你的代码约定很糟糕，让读者抓狂。

我的第一个建议是，您自己始终是代码的读者，为了您自己的方便，请将您的代码格式化（缩进、命名约定等）。并同意 Synchro，我认为在 jQuery 中，您应该更喜欢使用：

$("#form_id")

代替：

document.getElementById("form_id")

我的第二个建议：让你的问题更清楚。 “问题是验证在 IE 9 的登录模式框中不起作用”。有很多情况使它不起作用。有JS错误吗？或者表单是否成功提交而没有经过字段验证？你有没有留意 IE9 的开发者工具的控制台？提交表单时是否有错误消息？

我的第三个...问题：我看到您定义了一个名为“my_custom_function()”的自定义函数，但您没有使用它。查看您的代码：

你应该将这行代码插入到数组中：