未捕获的 RangeError：Chrome 上的语言标签无效

Posted 2023-05-09

【中文标题】未捕获的 RangeError：Chrome 上的语言标签无效

【英文标题】：Uncaught RangeError: Invalid language tag on Chrome

【发布时间】：2013-08-31 04:36:21

【问题描述】：

我有一个 MVC jquery 移动应用程序，并且在其中一个页面上我有一个日期时间选择器，当我使用 jqyery.validate 时会在 chrome 上出现此错误，即使我没有对选择器进行任何验证。我实际上想验证另一个控件。我将粘贴代码： 主视图：

@model MvcAppMobileJQuery.ViewModels.OrderVM
@
    ViewBag.Title = "";
    Layout = "~/Views/Shared/Layouts/_BaseLayout.cshtml";

@section Content

    <div id="contentDiv">
        <div style="margin-top: -31px;">
            @using (Html.BeginForm("SaveOrder", "Orders"))
             
                <table class="tableFormLayout" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            @Html.LabelFor(m => m.OrderDate, new  @class = "ui-input-text" )
                            @Html.TextBox("OrderDate", @Model.OrderDate.ToString("dd MMMM yyyy"), new  data_mini = "true", id = "orderDate" )
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="button" id="openOrderItemAddPopup" value="Add" />
                        </td>
                    </tr>
                </table>    
                @Html.Partial("~/Views/Orders/OrderItemAddPopup.cshtml", Model)            
            
        </div>
    </div>

@section Style

    @Styles.Render("~/Content/mobileScrollControlCss")

@section Scripts

    @Scripts.Render("~/bundles/jquerymobileScrollControl")
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () 
            // create a datepicker with default settings
            $("#orderDate").scroller(
                preset: 'date',
                theme: 'jqm',
                display: 'modal',
                mode: 'mixed',
                //animate: 'pop',
                dateOrder: 'dd mm yy',
                dateFormat: 'd MMMM yyyy'
            );
        );

    </script>

这是从主视图打开的弹出窗口，其中包含验证：

@model MvcAppMobileJQuery.ViewModels.OrderVM

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

<div data-role="none" id="OrderItemAddPopup" data-overlay-theme="b" style="width: 500px;"
    class="ui-corner-all">
    <div data-role="content">
        @Html.ValidationSummary()
        @using (Html.BeginForm())
        
            <table class="tableFormLayout" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        @Html.LabelFor(m => m.Quantity, new @class = "label")
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.Quantity, new data_mini = "true", type = "number", id = "txtQuantity")
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <a noloader="true" href="#" id="closeOrderItemAddPopup" data-role="button" data-inline="true"
                           data-icon="back">Cancel</a>
                        <input type="button" id="load" data-inline="true" value="Save" data-url="@Url.Action("LoadItemsPartial", "Orders")" data-icon="forward"/>
                    </td>
                </tr>
            </table>
        
    </div>
</div>
<script type="text/javascript">
    $('#load').click(function () 
        $('form').valid();
    );

    $(function () 
        $('#OrderItemAddPopup').modalPopLite( openButton: '#openOrderItemAddPopup', closeButton: '#closeOrderItemAddPopup', isModal: true );
        //LoadOrderItems();
    );
</script>

因此，当我单击日期选择器时，我会从 chrome 上的标题中收到消息。另外，如果我不单击它并打开弹出窗口，然后尝试保存弹出数据。如果我从选择器中取出验证，它工作正常。

【参考方案1】：

感谢fretje在this帖子中的回答，我已经设法解决了。

我也不得不改变这一行：

@Html.TextBox("OrderDate", @Model.OrderDate.ToString("dd MMMM yyyy"), new  data_mini = "true", id = "orderDate" )

到

@Html.TextBox("OrderDate", @Model.OrderDate.ToString("dd-MM-yyyy"), new  data_mini = "true", id = "orderDate" )

脚本部分现在看起来像这样：

@section Scripts
    
        @Scripts.Render("~/bundles/jquerymobileScrollControl")
        <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
        <script type="text/javascript">

            $(document).ready(function () 
                // create a datepicker with default settings
                $("#orderDate").scroller(
                    preset: 'date',
                    theme: 'jqm',
                    display: 'modal',
                    mode: 'mixed',
                    //animate: 'pop',
                    dateOrder: 'dd mm yy',
                    dateFormat: 'dd-mm-yy'
                );
            );

            $(function () 
                // Replace the builtin US date validation with UK date validation
                $.validator.addMethod(
                    "date",
                    function (value, element) 
                        var bits = value.match(/([0-9]+)/gi), str;
                        if (!bits)
                            return this.optional(element) || false;
                        str = bits[1] + '/' + bits[0] + '/' + bits[2];
                        return this.optional(element) || !/Invalid|NaN/.test(new Date(str));
                    ,
                    ""
                );
            );

        </script>