用于Vue验证器的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 =＆＃34; getRules（）＆＃34;并在方法getRules中返回规则的对象。这是plunked。

 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'
                  }
              }
          }