如何在 Jquery 验证中处理 html 元素 id/name 中的特殊字符？答案

【问题标题】：How to handle special characters in html element id/name in Jquery validation?如何在 Jquery 验证中处理 html 元素 id/name 中的特殊字符？
【发布时间】：2016-02-20 13:18:24
【问题描述】：

我有一个在 ids ( :,-,_ ) 中使用特殊字符的 HTML 表单。该表单使用 JQuery 验证插件来验证用户输入。具体来说，id 包括一个 GUID，以下是示例代码：

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-validate/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#respondForm').validate({ onclick: false,
                onkeyup: false,
                onfocusout: false,
                highlight:
function(element, errorClass) {
    $(element).css({ backgroundColor: '#FFFF88' });
}
,
                errorLabelContainer: $("ul", $('div.error-container')),
                wrapper: 'li',
                rules: { Input:_CDD66FA6-D190-434D-AF51-8272F64E0646_14ecbb3f-c0e0-4caf-b03a-013d12118405:
{
    required: true
, minlength: 5
, maxlength: 10
}

                }
,
                messages: { firstName:
{
    required: "xxx_Required"
, minlength: "XXX Should be greater than 5"
, maxlength: "XXX Cannot be greater than 10"
}

                }
            });
        });

    </script>
</head>
<body>
<form action="/Home/Submit" method="post" id="respondForm">  
   <div>
    <div class="error-container">
    <ul>

    </ul>
    </div>   
    </div>
    <div>    
        <input type="text" id="Input:_CDD66FA6-D190-434D-AF51-8272F64E0646_14ecbb3f-c0e0-4caf-b03a-013d12118405" name="Input:_CDD66FA6-D190-434D-AF51-8272F64E0646_14ecbb3f-c0e0-4caf-b03a-013d12118405" />        
        <br />
        <input type="submit" name="submit" value="Submit" />
        <br />

    </div>
</form>

如您所见，输入类型文本元素的 id/名称为“Input:_CDD66FA6-D190-434D-AF51-8272F64E0646_14ecbb3f-c0e0-4caf-b03a-013d12118405”

如果我在浏览器中运行此页面，我会收到 JavaScript 错误：

网页错误详情

消息：预期为“}”
线路：23
字符：50
代码：0
网址：http://localhost:64603/

错误指向这一行：

function(element, errorClass) {
    $(element).css({ backgroundColor: '#FFFF88' });
}
,
                errorLabelContainer: $("ul", $('div.error-container')),
                wrapper: 'li',
***[Line 23] ----->   rules: { Input:_CDD66FA6-D190-434D-AF51-8272F64E0646_14ecbb3f-c0e0-4caf-b03a-013d12118405:***

我该如何解决这个问题？

【问题讨论】：

将您的 id 用引号括起来（在 JavaScript 中）。
另外，请注意这里使用的不是 ID，而是 NAME 属性。

标签： javascript jquery jquery-plugins

【解决方案1】：

“Crescent Fresh”您的建议有效，将 id 用单引号括起来：

rules: { 'Input:_CDD66FA6-D190-434D-AF51-8272F64E0646_14ecbb3f-c0e0-4caf-b03a-013d12118405':
{

让它工作

【讨论】：