Kendo UI Validator

設定驗證規則

HTML5 表單輸入欄位限制(Form input constraint attributes)

透過 HTML 5 輸入欄位驗證屬性，瀏覽器會對這些條件進行驗證，基本上分為兩大類：

• 資料型別(type)。如：url、email。
• 驗證屬性(validation attribute)，如：pattern、required、min、max、step、minlength、maxlength。

但要考慮：使用者瀏覽器版本是否支援，即便支援也可能支援的不完全。還有一個問題：無法自訂驗證錯誤的訊息、位置及樣式。

<form>
    姓名：<input type="text" name="name" required />
    網誌：<input type="url" name="blogUrl" required />
    <button>儲存</button>
</form>

https://dojo.telerik.com/@suefengcheng/OyiDiDaR/2

Kendo UI Validator

支援 HTML 5 表單輸入欄位限制外，還可自訂驗證條件。

  <form id="myform">
    姓名：<input type="text" name="name" required />
    網誌：<input type="url" name="blogUrl" required />
    <button id="save">儲存</button>
  </form>
  
  <script>
    $("#myform").kendoValidator({
         messages: {
             onlyTomIsAllowed: "只接受Tom。",
             url: "要是網址！",
             required: "必要！",
         },
         rules: {
           onlyTomIsAllowed: function(input) {
             if (input.is("[name=name]")) {
                 return input.val() === "Tom";
             }
             return true;
           }
         }
    });
    
    var validator = $("#myform").kendoValidator().data("kendoValidator");
    $("#save").on("click", function() {
      validator.validate();
    });
  </script>

驗證對象

Form 表單中所有輸入欄位。

因此若要針對特定欄位驗證，請自行判斷input欄位。如下，針對名稱(name)為name的輸入欄位，驗證其值是否為 "Tom"：

           onlyTomIsAllowed: function(input) {
             if (input.is("[name=name]")) {
                 return input.val() === "Tom";
             }
             return true;
           }
https://dojo.telerik.com/@suefengcheng/OyiDiDaR/3

驗證順序

Kendo UI Validator會先做HTML 5 輸入欄位驗證，通過後才跑自訂驗證。

1. HTML 5 輸入欄位限制
2. 自訂驗證條件

顯示錯誤訊息

Kendo UI Validator預設會將訊息放在輸入欄位旁，但這很可能被遮到。

<span/>

可自行加入一個<span/>，以data-for屬性指定對應的輸入欄位。如此，這輸入欄位的錯誤訊息便會顯示在這個<span/>裡。

  <form id="myform">
    <p>
      姓名：<input type="text" name="name" required /><br/>
      <span class="k-invalid-msg" data-for="name"></span>
    </p>
    <p>
      網誌：<input type="url" name="blogUrl" required /><br/>
      <span class="k-invalid-msg" data-for="blogUrl"></span>
    </p>
    <button id="save">儲存</button>
  </form>

https://dojo.telerik.com/@suefengcheng/OyiDiDaR/3

整筆/跨欄位驗證

https://demos.telerik.com/kendo-ui/validator/custom-validation