vue.js - 用于 Vue Validator 的 Kendo Ui 中的自定义规则

Question

我开始使用 Vue 的 Kendo UI。

我想使用 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'
                  }
              }
          }