避免使用空格和特殊字符，但 Kendo 自动完成 mvc 包装器中的逗号除外

本文关键字：包装 mvc 空格 特殊字符 Kendo | 更新日期: 2023-09-27 18:34:49

我有一个剑道自动完成 mvc 包装器，我以逗号分隔的字符串形式输入其中，当有人输入空格或逗号以外的特殊字符时，我必须验证并显示错误。

下面是代码：

@(Html.Kendo().AutoComplete()
                                .Name("searchids")
                                .Filter("startswith")
                                .Placeholder("Enter Feed ids...")
                                .HtmlAttributes(new { style = "width:230%;height:50px" })
                                .Separator(", ")
                    )

避免使用空格和特殊字符，但 Kendo 自动完成 mvc 包装器中的逗号除外

尝试向 html 属性添加模式：

@(Html.Kendo().AutoComplete()
.Name("searchids")
.Filter("startswith")
.Placeholder("Enter Feed ids...")
.HtmlAttributes(new { @style = "width:230%; height:50px", @pattern="^['w,'-]+$" })
.Separator(", ")
)

向媒体资源添加RegularExpressionAttribute

[RegularExpression("^[A-Za-z0-9,]*$")]
public string searchids { get; set; }

并添加

@Html.ValidationMessageFor(m => m.searchids)

在您的视图中为您提供客户端和服务器端验证。

旁注：我不熟悉 Kendo.AutoComplete，但一些类似的插件隐藏了原始输入并将其替换为自己的 html，在这种情况下，如果您没有得到客户端验证，您可能需要配置jQuery.validator来验证隐藏的输入。

试试这个。 JSFiddle

$(document).ready(function() {
    var data = [
      "Albania",
      "Andorra",
      "Armenia",
      "Austria",
      "Azerbaijan",
      "Belarus",
      "Belgium",
      "Bosnia & Herzegovina",
      "Bulgaria",
      "Croatia",
      "Cyprus",
      "Czech Republic",
      "Denmark",
      "Estonia",
      "Finland",
      "France",
      "Georgia",
      "Germany",
      "Greece",
      "Hungary",
      "Iceland",
      "Ireland",
      "Italy",
      "Kosovo",
      "Latvia",
      "Liechtenstein",
      "Lithuania",
      "Luxembourg",
      "Macedonia",
      "Malta",
      "Moldova",
      "Monaco",
      "Montenegro",
      "Netherlands",
      "Norway",
      "Poland",
      "Portugal",
      "Romania",
      "Russia",
      "San Marino",
      "Serbia",
      "Slovakia",
      "Slovenia",
      "Spain",
      "Sweden",
      "Switzerland",
      "Turkey",
      "Ukraine",
      "United Kingdom",
      "Vatican City"
    ];
    //create AutoComplete UI component
    $("#countries").kendoAutoComplete({
      dataSource: data,
      filter: "startswith",
      separator: ", ",
      placeholder: "Select country...",
      change: function() {        
        var value = this.value();
        var data = this.dataSource.view();
        console.log(value);
      }
    });
    $("#countries").keypress(function(event) {
      var regex = new RegExp("^[A-Za-z0-9,]*$");
      var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
      if (!regex.test(key)) {
        event.preventDefault();
        return false;
      }
    });
  });
.k-autocomplete {
    width: 250px;
    vertical-align: middle;
  }
  
  .hint {
    line-height: 22px;
    color: #aaa;
    font-style: italic;
    font-size: .9em;
    color: #7496d4;
  }
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css"/>
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css"/>
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css"/>
<link rel="stylesheet"  type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css"/>
<input id="countries" />
<div class="hint">Start typing the name of an European country</div>

相关文章：