Kendo Ui 中的自定义规则 For Vue Validator

Question

我开始使用 Kendo UI for 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()" 和 return 方法 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'
                  }
              }
          }

Kendo Ui 中的自定义规则 For Vue Validator

Custom Rules in Kendo Ui For Vue Validator

vue.js

kendo-ui-vue