如何将电话号码和电子邮件验证添加到 Kendo-UI Grid？答案

【问题标题】：How do I add phone number & email validation to Kendo-UI Grid?如何将电话号码和电子邮件验证添加到 Kendo-UI Grid？
【发布时间】：2016-01-25 06:36:07
【问题描述】：

鉴于以下代码中提供的网格，我如何在电话和 电子邮件 上设置验证，以利用 kendo 在此提供的验证和屏蔽输入功能页面（http://demos.telerik.com/kendo-ui/maskedtextbox/index）？

例如，如果用户输入 5628103322，则应将其格式化为 (562)810-3322，如他们页面上的演示所示。此外，如果输入的数字不正确，它应该提供错误消息。

电子邮件也是如此，我们该怎么做？

<div id="grid"></div>
<script>
    var crudServiceBaseUrl = "/api",
    dataSource = new kendo.data.DataSource({
        transport: {
            read:  {
                url: crudServiceBaseUrl + "/companies",
                dataType: "json",
                type: "POST"
            },
            update: {
                url: crudServiceBaseUrl + "/companies/update",
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: crudServiceBaseUrl + "/companies/destroy",
                dataType: "json",
                type: "POST"
            },
            create: {
                url: crudServiceBaseUrl + "/companies/create",
                dataType: "json",
                type: "POST"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        error: function (e) {
            /* the e event argument will represent the following object:

            {
                errorThrown: "Unauthorized",
                sender: {... the Kendo UI DataSource instance ...}
                status: "error"
                xhr: {... the Ajax request object ...}
            }

            */
            //alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
        },
        autoSync: false,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: 20,
        selectable: "multiple cell",
        allowCopy: true,
        columnResizeHandleWidth: 6,
        schema: {
            total: "itemCount",
            data: "items",
            model: {
                id: "id",
                fields: {
                    id: { editable: false, nullable: true },
                    name: { validation: { required: true } },
                    phone: { type: "string" },
                    email: { type: "string" }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        height: 550,
        groupable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        toolbar: ["create"],
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        reorderable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        columns: [
            { field: "name", title: "Company Name" },
            { field: "phone", title:"Phone" },
            { field: "email", title:"Email" },
            { command: ["edit", "destroy"], title: "Operations", width: "240px" }
        ],
        editable: "popup"
    });
</script>

更新::

$("#grid").kendoGrid({
        dataSource: dataSource,
        groupable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        toolbar: ["create"],
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        reorderable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        columns: [
            { field: "name", title: "Company Name" },
            { 
                field: "phone",
                title: "Phone",
                editor: function(container, options){
                    var input = $('<input type="tel" data-tel-msg="Invalid Phone Number!" class="k-textbox"/>');
                    input.attr("name", options.field);
                    input.kendoMaskedTextBox({
                        mask: "(999) 000-0000"
                    });
                    input.appendTo(container);
                }
            },
            { 
                field: "email",
                title: "Email",
                editor: function(container, options){
                    var input = $('<input type="email" data-email-msg="Invalid email!" class="k-textbox"/>');
                    input.attr("name", options.field);
                    input.appendTo(container);
                }
            },
            { command: ["edit", "destroy"], title: "Operations", width: "240px" }
        ],
        editable: "popup"
    });

上面的网格代码已经改变，由于下面的答案，它现在几乎可以完美运行，现在我只需要弄清楚如何向电话号码和电子邮件字段添加验证，因此需要输入，并正确输入。

更新 #2

感谢答案，下面的代码现在可以完美运行，只是想将其分享给可能需要帮助的其他人。需要注意的一点是模型规则 phonerule 必须被命名为无论这个破折号中间的文本是 data-phonerule-msg。我猜 Kendo-UI 在寻找自定义规则时必须寻找它。

<div id="grid" style="height:100%;"></div>
<script>
    $(window).on("resize", function() {
      kendo.resize($("#grid"));
    });

    var crudServiceBaseUrl = "/api",
    dataSource = new kendo.data.DataSource({
        transport: {
            read:  {
                url: crudServiceBaseUrl + "/companies",
                dataType: "json",
                type: "POST"
            },
            update: {
                url: crudServiceBaseUrl + "/companies/update",
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: crudServiceBaseUrl + "/companies/destroy",
                dataType: "json",
                type: "POST"
            },
            create: {
                url: crudServiceBaseUrl + "/companies/create",
                dataType: "json",
                type: "POST"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        error: function (e) {
            /* the e event argument will represent the following object:

            {
                errorThrown: "Unauthorized",
                sender: {... the Kendo UI DataSource instance ...}
                status: "error"
                xhr: {... the Ajax request object ...}
            }

            */
            //alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
        },
        autoSync: false,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: 20,
        selectable: "multiple cell",
        allowCopy: true,
        columnResizeHandleWidth: 6,
        schema: {
            total: "itemCount",
            data: "items",
            model: {
                id: "id",
                fields: {
                    id: { editable: false, nullable: true },
                    name: { validation: { required: true } },
                    phone: { 
                        type: "string",
                        validation: { 
                            required: true,
                            phonerule: function(e){
                                if (e.is("[data-phonerule-msg]"))
                                {
                                    var input  = e.data('kendoMaskedTextBox');
                                    //If we reached the end of input then it will return -1 which means true, validation passed
                                    //Otherwise it won't === -1 and return false meaning all the characters were not entered.
                                    return input.value().indexOf(input.options.promptChar) === -1;
                                }
                                return true; //return true for anything else that is not data-phonerule-msg
                            } 
                        } 
                    },
                    email: { type: "string", validation: { required: true, email:true } }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        groupable: true,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        toolbar: ["create"],
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        reorderable: true,
        resizable: true,
        columnMenu: true,
        filterable: true,
        columns: [
            { field: "name", title: "Company Name" },
            { 
                field: "phone",
                title: "Phone",
                editor: function(container, options){
                    //pattern="[(][0-9]{3}[)] [0-9]{3}-[0-9]{4}"
                    var input = $('<input type="tel" data-phonerule-msg="Invalid Phone Number!" class="k-textbox"  required />');
                    input.attr("name", options.field);
                    input.kendoMaskedTextBox({
                        mask: "(999) 000-0000"
                    });
                    input.appendTo(container);
                }
            },
            { 
                field: "email",
                title: "Email",
                editor: function(container, options){
                    var input = $('<input type="email" data-email-msg="Invalid email!" class="k-textbox" required/>');
                    input.attr("name", options.field);
                    input.appendTo(container);
                }
            },
            { command: ["edit", "destroy"], title: "Operations", width: "240px" }
        ],
        editable: "popup"
    });
</script>

【问题讨论】：

标签： javascript kendo-ui telerik kendo-grid telerik-grid

【解决方案1】：

您应该在列定义中添加带有验证属性的自定义编辑器：

{
    field: "email",
    title:"Email",
    editor: function(container, options) {
        var input = $('<input type="email" data-email-msg="Invalid email!" class="k-textbox"/>');
        input.attr("name", options.field);
        input.appendTo(container);
    }
}

更新：电话验证：将此属性添加到电话输入（“phonerule” - 是自定义验证规则的名称）：

data-phonerule-msg="Invalid phone!"

将自定义验证规则添加到schema.model.fields.phone:

phone: {
    type: "string",
    validation: {
        phonerule: function(e) {
            if (e.is("[data-phonerule-msg]"))
            {
                var input  = e.data('kendoMaskedTextBox');
                return input.value().indexOf(input.options.promptChar) === -1;
            }
            return true;
        }
    }
}

【讨论】：

现在正在尝试，不知道该功能。
是的，这就是我需要的，这对电话号码有什么作用？尤其是将掩码分配给电话号码输入？
我更新了我的问题，我认为您的方法试图让我处理电话号码，但不确定如何进行验证？它现在可以工作并显示掩码，但您可以在按下更新的一半时输入数据并且没有错误消息。

【解决方案2】：

您可以使用此代码添加手机和电子邮件验证 -

schema: {
        model: {
            id: "id",
            fields: {                   
                mobile: {
                    editable: true, validation: {
                        required: true,
                        Mobilevalidation: function (input) {
                            if (input.is("[name='mobile']")) {

                                if ((input.val()) == "") {
                                    input.attr("data-Mobilevalidation-msg", "Mobile number required");
                                    return /^[A-Z]/.test(input.val());
                                }
                                else {
                                    if (/^\d+$/.test(input.val())) {
                                        if (input.val().length == 10) {
                                            return true;
                                        } else {
                                            input.attr("data-Mobilevalidation-msg", "Mobile number is invalid");
                                            return /^[A-Z]/.test(input.val());
                                        }

                                    }
                                    else {
                                        input.attr("data-Mobilevalidation-msg", "Mobile number is invalid");
                                        //alert(/^[A-Z]/.test(input.val()));
                                        return /^[A-Z]/.test(input.val());
                                    }
                                    return true;
                                }
                            }

                            return true;
                        }
                    }
                },
                email: { editable: true, type: "email", validation: { required: true } },
            }
        }
    }

【讨论】：