时间戳

首页 > 解决方案 > 如何限制用户不要在使用 Jquery 的 asp.net 表单中的特定字段中放置任何空格

jquery - 如何限制用户不要在使用 Jquery 的 asp.net 表单中的特定字段中放置任何空格

问题描述

我有一个表单，我正在使用键值对获取用户输入。我不希望用户在键中放置任何空白空格。所以我创建了一个Id="noWhite"并试图在这个id上应用一个jquery。这是我的代码

<div class="row">
<div class="col-md-4">
    <form asp-action="Create">
        <div class="form-group">
            <label class="control-label">Device Name:</label>
            <input asp-for="DeviceName" class="form-control" />
            <span asp-validation-for="DeviceName" class="text-danger"></span>
        </div>
        <br />

        <h3>Device Parameters:</h3>
        @for (var i = 0; i < 2; i++)
        {
            <div class="form-group">
                <label class="control-label">Name:</label>
                <input name="DeviceParameters.Parameters[@i].Key" class="form-control" id="noWhite" />
            </div>
            <div class="form-group">
                <label class="control-label">Value:</label>
                <input name="DeviceParameters.Parameters[@i].Value" class="form-control" />
            </div>
        }
        <br />
        <h3>Firmware Gates:</h3>
        @for (var i = 0; i < 2; i++)
        {
            <div class="form-group">
                <label class="control-label">Name:</label>
                <input name="FirmwareGates.Parameters[@i].Key" class="form-control" id="noWhite" />
            </div>
            <div class="form-group">
                <label class="control-label">Value:</label>
                <input name="FirmwareGates.Parameters[@i].Value" class="form-control" />
            </div>
        }

        <br />
        <h3>Modem Include List:</h3>
        @for (var i = 0; i < 2; i++)
        {
            <div class="form-group">
                <label class="control-label">Name:</label>
                <input name="ModemIncludeList.Parameters[@i].Key" class="form-control" id="noWhite" />
            </div>
            <div class="form-group">
                <label class="control-label">Value:</label>
                <input name="ModemIncludeList.Parameters[@i].Value" class="form-control" />
            </div>
        }

        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>
    </form>
</div>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script type="text/javascript">
        $("#noWhite").on("keypress", function (e) {
            if (e.which === 32)
                e.preventDefault();
        });
    </script>
}

但它仅适用于我的第一个 DeviceParameters 键（名称）。这是一个屏幕截图。 在此处输入图像描述

我试图限制设备参数、固件门和调制解调器包含列表的名称字段中的空格。但我的 jquery 仅适用于名字字段，但并非适用于所有人。

如何限制用户不要在任何键（名称）字段中放置任何空格？

标签： jqueryasp.net-core

解决方案

我认为这里的问题可能是具有相同名称的多个 ID。id 应该是唯一的。如果您需要识别多个元素，您可以使用类。

例子：

代替：

<input name="ModemIncludeList.Parameters[@i].Key" class="form-control" id="noWhite" />

就用这个：

<input name="ModemIncludeList.Parameters[@i].Key" class="form-control noWhite" />

然后在你的 jquery 中，而不是 $("#noWhite") 选择器，使用这个选择器 $(".noWhite")

请注意，“#”已替换为“.”。. 这是因为 # 查找 Id，点查找类。 

$(".noWhite").on("keypress", function (e) {
        if (e.which === 32)
            e.preventDefault();
    });

我希望这有帮助...

推荐阅读