Kendo ui 如何在剑道网格弹出窗口中添加自定义验证

如何将最小长度验证添加到文本框并显示自定义错误消息

我希望验证以下内容：

• 用户名的最小长度为6
• 密码和确认密码匹配
• 地址1是必需的

下面是弹出式模板的代码。模板中指定的minlength无效，但maxlength工作正常

<script id="popup_editor" type="text/x-kendo-template">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <label for="UserName"><b>UserName*</b></label>
            </td>
            <td>
                <div class="control-row">
                    <input type="text" 
                           name="UserName" 
                           id="UserName" 
                           class="k-input k-textbox"
                           required
                           **minLength**="6"
                           maxlength="8"
                           pattern="[a-zA-Z0-9]+"
                           validationMessage="Please enter username"/>
                    <span class="k-invalid-msg" data-for="UserName" ></span>
                </div>
            </td>
            <td></td>
            <td></td>
         </tr>
         <tr>
             <td>
                 <div>
                     <label for="Password"><b>Password*</b></label>
                 </div>
             </td>
             <td>
                 <div class="k-edit-label">
                     <input type="password" 
                            id="Password" 
                            name="Password"
                            class="k-input k-textbox"required
                            validationMessage="Please enter Password"/>
                     <span class="k-invalid-msg" data-for="Password"></span>
                 </div>
              </td>
              <td>
                  <div>
                      <label for="ConfirmPassword" style=""><b>Confirm Password</b></label>
                  </div>
              </td>
              <td>
                  <div class="k-edit-label">
                      <input type="password" 
                             id="ConfirmPassword" 
                             name="ConfirmPassword"
                             class="k-input k-textbox"required
                             validationMessage="Please enter Confirm Password"/>
                  </div>
              </td>
          </tr>
          <tr>
              <td>
                  <div>
                      <label for="Company_Name"><b>Company Name*</b></label>
                  </div>
              </td>
              <td>
                  <div class="k-edit-label">
                      <input name="Company_Name"
                             id="Company_Name"
                             required
                             pattern="[a-zA-Z0-9]+"
                             validationMessage="Please enter Valid CompanyName"/>
                  </div>
              </td>
              <td></td>
              <td></td>
          </tr>
          <tr>
              <td>
                 <div>
                     <label for="First_Name"><b>First Name*</b></label>
                 </div>
              </td>
              <td>
                  <div class="k-edit-label">
                      <input type="text"
                             name="First_Name"
                             id="First_Name"
                             data-type="string"
                             data-bind="value:First_Name"
                             class="k-input k-textbox" required
                             pattern="[a-zA-Z]+"
                             validationMessage="Please enter FirstName"/>
                   </div>
               </td>
               <td>
                   <div>
                       <label for="Last_Name"><b>Last Name*</b></label>
                   </div>
               </td>
               <td>
                   <div class="k-edit-label">
                       <input type="text" 
                               id="Last_Name"
                                name="Last_Name"
                                class="k-input k-textbox" required
                                pattern="[a-zA-Z]+"
                                validationMessage="Please enter LastName"/>
                   </div>
               </td>
           </tr>
           <tr>
               <td>
                   <div>
                       <label for="Address1"><b>Address1*</b></label>
                   </div>
               </td>
               <td>
                   <div class="k-edit-label">
                       <textArea style="resize: none;" 
                                 rows="5" 
                                 cols="18" 
                                 name="Address1" 
                                 maxlength="150" 
                                 id="Address1" required
                                 pattern="[a-zA-Z0-9]+"
                                 validationMessage="Please enter Address">
                       </textarea>
                   </div>
               </td>
           </tr>  
</table>

用户名*
密码*
确认密码
公司名称*
名字*
姓*
地址1*

您可以在网格的数据源中为弹出式编辑添加自定义验证

var dataSource = new kendo.data.DataSource({
    transport: {
        ...
    },
    schema: {
        model: {
            id: "UserName",
            fields: {
                UserName: {}
                Password: {}
                ConfirmPassword: {}
                Company_Name: {}
                First_Name: {}
                Last_Name: {}
                Address1: {
                    validation: {
                        minLength: function (input) {
                            if (input.is("[name=UserName]")) {
                                return input.val().length >= 6;
                            }
                            return true;
                        },
                        match: function (input) {
                            if (input.is("[name=ConfirmPassword]")) {
                                return input.val() == $("#Password").val();
                            }
                            return true;
                        }
                    }
                }
            }
        }
    }
});

有几件事值得尊重： 因此，验证将针对弹出窗口中的所有输入元素运行

您只需为模型中的一个字段定义它。哪一个无关紧要

您必须检查在当前运行中检查了哪个输入元素，在我的示例中，哪个元素执行if语句

您必须在定义的每个规则的末尾附加一个

return true

，否则您将收到一条错误消息，提示您没有明确检查的每个输入。如果没有传递返回值，kendo会自动假定检查结果为假

每个验证规则都需要自己的验证消息，否则您的验证工具提示框将只显示一个警告徽标，而不显示任何文本。您可以将其作为html属性（data-{validation rule}-msg）添加到输入元素中，如下所示：

<input type="text" 
       name="UserName" 
       id="UserName" 
       class="k-input k-textbox"
       required
       maxlength="8"
       pattern="[a-zA-Z0-9]+"
       validationMessage="Please enter username"
       data-minLenght-msg="Username must be at least 6 characters"/>


<input type="password" 
       id="ConfirmPassword" 
       name="ConfirmPassword" 
       class="k-input k-textbox"
       required
       validationMessage="Please enter Confirm Password"
       data-match-msg="Password and confirmation must be equal"/>

希望这有助于在规则中添加以下内容：

          match: function (input) {
                if ((input.is('[name=\'Password\']') || input.is('[name=\'ConfirmPassword\']'))&& $('#ConfirmPassword').length !== 0) {
                    if ($('#Password').val().length > 0 && $('#ConfirmPassword').val().length > 0) {
                        if (input.is('[name=\'Password\']')) {
                            return input.val() === $('#ConfirmPassword').val();
                        }
                        else if (input.is('[name=\'ConfirmPassword\']')) {
                            return input.val() === $('#Password').val();
                        }
                    }
                }
                return true;
            },
            minLength: function (input) {
                if (input.is("[name=UserName]")) {
                    return input.val().length >= 6;
                }
                return true;
            },
            requiredAddress: function (input) {
                if (input.is("[name=Address1]")) {
                    return $('#Address1').val() !== '' ? false : true;
                }
                return true;
            }