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

有几件事需要尊重：验证会在弹出窗口中运行 ALL 输入元素，因此

您只需为模型中的 ONE 字段定义它。哪一个无所谓。
你必须检查当前运行中检查了哪个输入元素，这在我的例子中是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"/>

希望这有帮助

Answer 2

在规则中添加：

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

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

2 个答案: