Kendo 百分比值的数字文本框自定义验证

Question

我们正在尝试通过覆盖 Kendo numerictextbox 显示百分比值的默认行为来显示验证错误消息。

我们的期望是在用户输入超过 100 的任何值时提供自定义消息。

默认情况下 Kendo 如果用户键入的值超过 100，则百分比的 NumericTextbox 会自动更正值（我们不希望出现这种情况）

请找到 jsfiddle 参考资料 URL 以更好地理解它 https://jsfiddle.net/6uyp825h/57/

<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/numerictextbox/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>

</head>
<body>

    <div id="example">
        <div id="add-product" class="demo-section k-content">
            <p class="title">Add new product</p>
            <ul id="fieldlist">
                <li>
                    <label>
                        Price Discount:
                        <input id="percentage" value="5" title="percentage" style="width: 100%;" />
                    </label>
                </li>

            </ul>
        </div>


        <script>
            $(document).ready(function() {

                // create Percentage NumericTextBox from input HTML element
                $("#percentage").kendoNumericTextBox({
                    format: "##.00 \%",
                    min: 0,
                    spinner: false
                });

    var container = root;
    kendo.init(container);

    container.kendoValidator({
        rules: {
            checkPercentageMaxValue: function (input) {

               var maxAllowedValue = 100;
               var currentValue = parseInt($("#percentage").val());
                        if (currentValue > maxAllowedValue)
                        {
                            return false;
                        }
                        else {
                            return true;
                        }
                    return true;
            }
        },
        messages: {

            checkPercentageMaxValue: "Percentage value cannot be greater than 100."
        }
    });


            });
        </script>

        <style>
            .demo-section {
                padding: 0;
            }

            #add-product .title {
                font-size: 16px;
                color: #fff;
                background-color: #1e88e5;
                padding: 20px 30px;
                margin: 0;
           }

           #fieldlist {
               margin: 0 0 -1.5em;
               padding: 30px;
           }

           #fieldlist li {
               list-style: none;
               padding-bottom: 1.5em;
           }

           #fieldlist label {
               display: block;
               padding-bottom: .6em;
               font-weight: bold;
               text-transform: uppercase;
               font-size: 12px;
           }

           #fieldlist label .k-numerictextbox {
               font-size: 14px;
           }
        </style>

    </div>

这是我在真实场景中得到的html

<div class="col-sm-8">
        <span class="k-widget k-numerictextbox single-line text-box form-control">
            <span class="k-numeric-wrap k-state-default k-expand-padding">
                <input tabindex="0" title="112.00 %" class="k-formatted-value single-line text-box form-control k-input k-valid" role="spinbutton" aria-disabled="false" aria-valuenow="112" style="display: inline-block;" type="text">
                <input name="PercentHeld3" class="single-line text-box form-control k-input k-valid" id="PercentHeld3" role="spinbutton" aria-disabled="false" aria-valuenow="112" style="display: none; border-color:black; " type="text" maxlength="16" data-role="numerictextbox" data-bind="value: PercentHeld" data-spinners="false" data-numberformat="percentage" data-decimals="2" data-validate="true" data-maxallowedvalue="100" data-max-msg="Percentage value cannot be greater than 100.">
                <span class="k-select" style="display: none;">
                    <span title="Increase value" class="k-link k-link-increase" style="touch-action: none;" aria-label="Increase value" unselectable="on">
                        <span class="k-icon k-i-arrow-60-up" unselectable="on"></span>
                    </span>
                    <span title="Decrease value" class="k-link k-link-decrease" style="touch-action: none;" aria-label="Decrease value" unselectable="on">
                        <span class="k-icon k-i-arrow-60-down" unselectable="on"></span>
                    </span>
                </span>
            </span>
        </span>
    </div>

真实场景中使用的规则

checkPercentageMaxValue: function (input) {
                $('input[data-maxallowedvalue][data-validate="true"]').each(function (index, item) {
                    var maxAllowedValue = parseInt($(item).attr('data-maxallowedvalue'));
                    var currentValue = parseInt($(item).val().replace(/%?$/, ''));
                    if (currentValue > maxAllowedValue) {
                        return false;
                    }
                    else {
                        return true;
                    }
                });
                return true;
            }

Answer 1

经过反复试验，终于明白你想要什么。我认为您误解了验证器规则的工作原理。

http://dojo.telerik.com/UHIhACOh

规则： checkPercentageMaxValue：函数（输入）{

     var valid = true;
     singlerule += 1;
     if ($(input).is('[data-maxallowed-value][data-validate="true"]')) {
       var maxAllowedValue = parseFloat($(input).attr('data-maxallowed-value'));
       var currentValue = parseFloat($(input).val());
       if (isNaN(currentValue)) {
         currentValue = 0;
       }
       valid = (currentValue <= maxAllowedValue);
       $('#control1').html('Max Allowed Value::' + maxAllowedValue + ',Current Parsed Value::' + currentValue);
     } else {
       $('#control1').html('<pre><code>' + JSON.stringify($(input), null, 4) + '</code></pre>');

     }

     $('#control1').append('I ran <b>checkPercentageMaxValue</b> rule: ' + singlerule + 'time(s)<br/>');


     singlerule = 0;

     return valid;
   },
   yourrule: function(input) {
     $('input[data-maxallowed-value][data-validate="true"]').each(function(index, item) {
       multirule += 1;
        $('#control1').append('I ran <b>yourrule</b> rule: ' + multirule + 'time(s)<br/>');
       var maxAllowedValue = parseFloat($(item).attr('data-maxallowed-value'));
       var currentValue = parseFloat($(item).val());
       if (isNaN(currentValue)) {
         currentValue = 0;
       }
       if (currentValue > maxAllowedValue) {
         return false;
       } else {
         return true;
       }
     });


     multirule = 0;
     return true;

   }

 }

自定义规则列表中列出的每个规则运行在每个正在验证的控件上。

因此，您当前的规则是检查每个输入控件，然后再次检查该类型的任何其他输入控件，前提是它们满足批准的条件。

所以你运行多次检查，如果一个检查通过，那么你的规则假定所有检查都通过了，如果它达到了真实的条件，并且对于一个错误的项目也是如此，这就是为什么你正在解决您当前遇到的问题。显然，如果这是您想要的（同时检查多个项目），那么您需要将 true/false 值保存在变量中，以便它 return 返回消息（但此消息只会接下来显示启动初始 validation/focus)

的控件

希望添加第二个控件能让您更清楚地了解正在发生的事情。

如您所见，第一次输入控件时，您的规则将运行两次，直到其中一个输入框指出处于错误状态，然后您的规则将仅运行当其中一个控件处于无效状态，如果您在第二个框中输入的值不正确，则您的规则表明它已成功退出并且有效。

我添加了一个按钮，因此您可以查看验证器是否认为它根据提供的规则处于 valid/invalid 状态。

如果有任何不清楚的地方或您需要更多信息，请告诉我，我会相应地更新答案。

Kendo 百分比值的数字文本框自定义验证

Kendo Numeric text box custom validation for percentage value

kendonumerictextbox

kendo-validator