在 Kendo 自动完成 mvc 包装器中避免使用 space 和逗号以外的特殊字符

Question

我有一个 Kendo 自动完成 mvc 包装器，我以逗号分隔字符串的形式在其中输入，当有人输入白色 space 或特殊字符时，我必须验证并显示错误除了逗号。

代码如下：

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

Answer 1

将 RegularExpressionAttribute 添加到您的属性

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

并添加

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

在您看来，为您提供客户端和服务器端验证。

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

Answer 2

尝试向 html 属性添加模式：

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

Answer 3

试试这个。 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>

在 Kendo 自动完成 mvc 包装器中避免使用 space 和逗号以外的特殊字符

Avoid space and special characters except comma in Kendo autocomplete mvc wrapper

c#

asp.net-mvc

kendo-ui

kendo-asp.net-mvc