如何在Kendo-UI Grid中添加电话号码和电子邮件验证？

Question

鉴于下面代码中提供的网格,如何在手机和电子邮件上设置验证,以利用此页面上提供的验证和屏蔽输入功能(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>

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