如何使用kendo验证器验证多个电子邮件?

时间:2017-09-06 14:19:25

标签: validation mvvm data-binding kendo-ui kendo-validator

我想用输入html kendo验证电子邮件地址。 这是我的HTML代码:

<label for="doc" class="required">E-mail</label>
<input type="email" multiple pattern="^([\w+-.%]+@[\w-.]+\.[A-Za-z]{2,4},*[\W]*)+$" value="" data-bind="value: mail" id="doc" name="mail" required data-email-msg="Email format is not valid" />

我希望地址用逗号分隔,但这不起作用!不是为剑道验证

enter image description here

1 个答案:

答案 0 :(得分:2)

这里有DEMO来验证由分号分隔的单个输入字段中的多个电子邮件。

为此,我创建了一个自定义的Kendo验证器规则。 DEMO的代码片段如下所示:

<强> HTML:

<input type="text" class="k-textbox" name="Email" id="Email" required data-required-msg="Please enter atleast one email" data-multipleemails-msg="Some of the Entered Email ids are invalid"/>

<强> JS:

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

                $(function () {
                    var container = $("#employeeForm");
                    kendo.init(container);
                    container.kendoValidator({
                        rules: {
                            multipleemails: function (input) {
                                if (input.is("[data-multipleemails-msg]") && input.val() != "")
                                {                                   
                                  var emailsArray = input.val().split(";");
                                    for (var i=0; i < emailsArray.length; i++)
                                    {
                                      //alert(emailsArray[i]);
                                      //return validateEmail(emailsArray[i].trim());
                                        if ((emailsArray[i].trim() != "") && (validateEmail(emailsArray[i].trim()) == false))
                                      {
                                          return false;
                                      }
                                    }

                                }

                                return true;
                            }
                        }
                    });
                });


                $('#save').click(function() {
                //alert('save');
                    var validator = $("#employeeForm").data("kendoValidator");
                    if (validator.validate()) {
                        alert("Form is successfully validated");
                    }

                });