Kendo UI Validation的GUID正则校验失效问题排查

我在使用Kendo UI Validation结合HTML5 pattern属性进行GUID格式校验时，校验功能失效。输入1-2个字符即可通过校验，但正确的校验应该仅允许符合GUID格式（如427f519e-a21f-4a8a-a600-5f64ff7eb957）的内容通过，请问我遗漏了什么？

代码示例 #

JavaScript代码 #

$(document).ready(() => {
  $("#btn").on("click", (e) => {
    const validation = $("#myDiv").kendoValidator().data("kendoValidator");
    validation.validate();
  });
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.3.0/default/default-ocean-blue.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.425/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.425/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.425/js/kendo.all.min.js"></script>

<div id="myDiv">
  <input id="txt" name="text field" required pattern="/^(\{){0,1}[0-9a-fA-F]{8}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{4}\-[0-9a-fA-F]{12}(\}){0,1}$/gi" />
</div>
<button id="btn">Click</button>

问题原因及修复方案 #

1. HTML5 pattern属性写法错误 #

HTML5的pattern属性不需要加正则字面量的/分隔符和g/i修饰符，直接写正则主体就行。你现在把斜杠和修饰符都写进去了，导致校验逻辑完全错了——系统会把这些符号当成要匹配的内容，所以只要输入的字符能匹配到斜杠或者任意字母数字，就会通过校验。

2. 修正pattern属性 #

把pattern里的/和gi去掉，同时可以简化转义的\-为-（正则里字符组外的减号不用转义）。修正后的input如下：

<input id="txt" name="text field" required pattern="^(\{)?[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}(\})?$" />

3. 可选：用Kendo自定义校验规则更可靠 #

如果想避免浏览器对HTML5 pattern的兼容问题，或者需要自定义错误提示，可以给Kendo Validator加个自定义规则：

$(document).ready(() => {
  $("#myDiv").kendoValidator({
    rules: {
      guid: function(input) {
        if (input.is("#txt")) {
          const guidRegex = /^(\{)?[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}(\})?$/i;
          return guidRegex.test(input.val());
        }
        return true;
      }
    },
    messages: {
      guid: "请输入有效的GUID格式"
    }
  });

  $("#btn").on("click", (e) => {
    const validation = $("#myDiv").data("kendoValidator");
    validation.validate();
  });
});

对应的input可以去掉pattern，加上data-val-guid="true"来触发这个规则：

<input id="txt" name="text field" required data-val-guid="true" />

内容的提问来源于stack exchange，提问作者Chris