Пользовательские правила в Kendo Ui For Vue Validator

Question

Я начинаю использовать Kendo UI для Vue.

Я хочу использовать Kendo Validator Wrapper, и он кажется очень простым для базовой проверки.

Образец предоставлен:

<div id="vueapp" class="vue-app">
<form id="ticketsForm" ref="myForm" v-kendo-validator @submit.prevent="onSubmit">
    <input type="search"
        id="search"
        name="search"
        required
        validationMessage="Field is required"
        class="k-textbox" />
    <span class="k-invalid-msg" data-for="search"></span>

    <div>
        <button class="k-button k-primary" type="submit">Submit</button>
    </div>        
</form>

<div class="status"></div>

Для пользовательской проверки Kendo предоставьте правила в разделе конфигурации:

https://docs.telerik.com/kendo-ui/api/javascript/ui/validator/configuration/rules

... вы можете помочь мне понять, как я могу настроить пользовательские правила с помощью этой оболочки?

Спасибо

Answer 1

Вы можете определить валидатор следующим образом - v-kendo-validator="getRules()" и вернуть объект правил в метод getRules. Вот вонзил.

 getRules: function () {
              return {
                  rules: {
                      customRule1:  function (input) {

                          // all of the input must have a value
                          return kendo.jQuery.trim(input.val()) !== ''
                      },
                      customRule2: function (input) {
                          // only 'Tom' will be valid value for the username input

                          return input.val() === 'Tom'
                      }
                  },
                  messages: {
                      customRule1: 'All fields are required',
                      customRule2: 'Your UserName must be Tom'
                  }
              }
          }