如何在Kendo Grid Popup中添加自定义验证

Question

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

我想验证以下内容:

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

这是弹出模板的代码.模板中指定的最小长度不起作用,但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>

Answer 1

您可以在网格的dataSource中为弹出编辑添加自定义验证.

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;
                        }
                    }
                }
            }
        }
    }
});

有几点需要注意:因此,弹出窗口中的所有输入元素都会运行验证

1. 你只需要定义它为ONE模型中的字段.哪一个无所谓.
2. 你必须检查在当前运行中检查了哪个输入元素,这在我的示例中执行了if语句.
3. 你必须return true在你定义的每个规则的末尾附加一个,否则你将收到一条错误消息,指出你没有明确检查的每个输入.如果没有传递返回值,则kendo会自动认为检查结果为false.

每个验证规则都需要自己的验证消息,否则您的验证工具提示框将仅显示没有任何文本的警告徽标.您可以在输入元素中将其添加为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"/>

希望这可以帮助