Hap前端kendoui关于必输等校验的总结

系统管理员 2020-11-29 15:44 1064阅读 0赞

# HAP前端kendoui关于必输等校验的总结 #

## 项目常用场景 ##

*  表单：在项目中经常会有表单验证，比如说注册（新增），信息更改（编辑）等等。在HAP项目中也常见到这两种情况，  
    比如在模态框（kendoWindow）中的新增、编辑，页面表单信息输入、保存（更改操作）就会用到校验。
 *  grid：在grid表格中也无外乎就新增和编辑保存操作时会触发验证行为。

## 表单验证 ##

表单验证包括了头部信息的验证和模态框中表单信息的验证等等，它们都是一样的。

1. html
````
    <div id="header_h">
            <div class="row" style="margin-left: 20px;">
                <div class="col-md-1" style="padding: 0px;line-height: 30px">说明</div>
                <div class="col-md-2" style="padding: 0px">
                <input class="k-textbox k-valid" data-bind="value:model.description" id="description" name="description" type="text">
                </div>
                <div class="col-md-1" style="padding: 0px;line-height: 30px">清洗编码</div>
                <div class="col-md-2" style="padding: 0px">
                    <input class="k-textbox k-valid" required data-bind="value:model.cleanCode" id="cleanCode" name="cleanCode">
                </div>
            </div>
            <div class="col-md-6 col-md-offset-6" style="margin-top: 10px;margin-bottom: 5px;">
                <button class="btn btn-default btn-success" id="head_save">保存</button>
            </div>
        </div>
````
    在上面代码中我们对清洗编码input进行试验总结：
    1. input 中要加 required
    2. name 还有个提示作用，比如现在它的必输提示是：cleanCode为必填项

1.  script
````
    // 自定义错误模板
        var errorTemplate = '<div class="k-widget k-tooltip k-tooltip-validation"' + 'style="margin:0.5em"><span class="k-icon k-warning"> </span>' + '#=message#<div class="k-callout k-callout-n"></div></div>'
        $("#header_h").kendoValidator({
            validate: function(e) { 
            },
            //验证样式 默认为default
            invalidMessageType : "tooltip",
            //自定义错误模板
            errorTemplate: errorTemplate
        });
        //----------------------
        var errorTemplate = '<div class="k-widget k-tooltip k-tooltip-validation"' + 'style="margin:0.5em"><span class="k-icon k-warning"> </span>' + '#=message#<div class="k-callout k-callout-n"></div></div>'
            $("#header_h").kendoValidator({
                validate: function(e) { 
                },
                //验证样式 默认为default
                invalidMessageType : "tooltip",
                //自定义错误模板
                //errorTemplate: errorTemplate
        });
````
对整个div加上kendoValidator验证，则里面的所有input标签都加上了验证，上面的例子html中我是删掉了很多input的，效果如图。这两种情况下边框会变红，但是鼠标移入就浮现文字消息，移出则消失：

![鼠标移出][Image 1]![这里写图片描述][SouthEast]  
![鼠标移入][Image 1]![这里写图片描述][SouthEast 1]

验证样式二：
````
    var errorTemplate = '<div class="k-widget k-tooltip k-tooltip-validation"' + 'style="margin:0.5em"><span class="k-icon k-warning"> </span>' + '#=message#<div class="k-callout k-callout-n"></div></div>'
        $("#header_h").kendoValidator({
            validate: function(e) {
            },
            //验证样式 默认为default
            invalidMessageType : "default",
            //自定义错误模板
            errorTemplate: errorTemplate
        });
    //--------------------
    var errorTemplate = '<div class="k-widget k-tooltip k-tooltip-validation"' + 'style="margin:0.5em"><span class="k-icon k-warning"> </span>' + '#=message#<div class="k-callout k-callout-n"></div></div>'
        $("#header_h").kendoValidator({
            validate: function(e) {
            },
            //验证样式 默认为default
            //invalidMessageType : "default",
            //自定义错误模板
            errorTemplate: errorTemplate
        });
    
````

如图，这两种情况下移入移出都一样，边框不会变红，但是文字提示一直存在，直到输入然后重新校验：  
![xg2][Image 1]![这里写图片描述][SouthEast 2]

验证样式三：
````
     $("#header_h").kendoValidator({
            validate: function(e) {
            },
            //验证样式 默认为default
            invalidMessageType : "default",   
        });
    
    //---------------------
    $("#header_h").kendoValidator({
            validate: function(e) {
            },
        });
````

如图，不写验证样式或者写默认的default，都会在input框的右边或者下边（看input后预留的地方的width是否够）出现验证消息  
所以，一定要在input的下面预留出地方，以免打乱本来的样式，或者在下面放上span标签：
````
    //表单验证这里<span>标签用来决定验证信息出现的位置
            <span class="k-invalid-msg" data-for="cleanCode"></span>
````
![xg3][Image 1]![这里写图片描述][SouthEast 3]

**保存**

对头部信息（表单信息）进行保存的时候，基本上业务需求都是点击保存，如果不符合的input框的内容，就会变红或者出现验证消息，这时候只要在保存方法里再调用一次表单验证就好了

// 保存
            $("#head_save").click(function () { 
                var modeljson=viewModel.model.toJSON();
                if(0!=viewModel.model.headerId){
                    modeljson.__status='update';//更新
                }else{
                    modeljson.__status='add';   //新增
                }
                // 再表单验证一次，true就继续
                if($("#header_h").data("kendoValidator").validate()){   
                    if(viewModel.model.targetFileName!='' && viewModel.model.cleanCode!=''
                        && viewModel.model.sourceTableName!='' && viewModel.model.targetTableName!=''){
                        $.ajax({
                            url:BaseUrl +"/v1/organization/dataCleanHeaders/submit",
                            type:"post",
                            data:kendo.stringify([modeljson]),
                            contentType: "application/json",
                            success:function(data){ 
                                if(data.success){
                                    kendo.ui.showInfoDialog({
                                        title: '提示',
                                        width: 400,
                                        message: '保存成功！'
                                    });
                                }else{
                                    kendo.ui.showErrorDialog({
                                        message: '保存失败'
                                    });
                                }
                            }
                        });
                    }else{  // 这个else可以不需要了
                        kendo.ui.showErrorDialog({
                            message: '数据清洗头信息未填写完整!'
                        });
                    }
                }
            });

**自定义验证**

如果写了rules规则，那么必输的规则也要加上

$("#header_h").kendoValidator({
          rules: {
            customRule1: function(input){ 
                //这里可以写个if语句对指定的input做必输校验
              return $.trim(input.val())!=="";//所有input必输
            },
            customRule2: function(input) { 
              // 这里可以定义其他的校验，比如username唯一性校验
              if (input.is("[name=username]")) {
                  // 后续代码 校验成功 返回true 否则false
                return false;
              }
              return true;
            }
          },
          messages: {  // 校验的提示消息
            customRule1: "必输",
            customRule2: "username不能重复"
          }
        });

如果不想因为用上面的方法而重写必输校验的规则，其实还可以自己写jquery，在要校验的input后写个放入提示消息并display:none，然后对input写一个change()函数，在函数里对input的value进行验证，如果不符合就让span的display变为block，但一定要注意样式

## grid 验证 ##

grid中的验证很简单，首先：在dataSource中的schema里的model的fields中加上验证就好了：

fields: {
                        connectionName:{
                            validation:{
                                required:true,   // 必输验证 如果只需要必输验证，则下面的自定义验证就不需要写了
                                connectionNamevalidation: function (input) {   //自定义验证：这里是去后台查询进行唯一性验证
                                    if (input.is("[name='connectionName']") && input.val()!="") {
                                        //console.log("wlg"+input.val());
                                        input.attr("data-connectionNamevalidation-msg","连接名称不能重复");
                                        //去后台检查
                                        var tf ;   // true/false
                                        $.ajax({
                                            type:"POST",
                                            url:"/v1/load/DBConn/checkName?connectionName="+input.val(),
                                            async: false,  // 同步
                                            success:function (data) { 
                                                tf = data ;
                                            }
                                        })
                                        return tf;
                                    }
                                    return true;
                                }
                            }
                        }
                }

在grid中如果写了eitor函数并在其中append了input标签，则在函数中的input标签里一定要加上 required 属性。

editor: function (container, options) { 
                        $('<input required type="number" class="k-input k-textbox" name="' + options.field + '"/>').appendTo(container);
                    }

**保存**

如果调用的是hap的viewmodel中自带的保存函数，则会在点击保存的时候自动验证gird里的框框

save: function () { 
            $('#grid').data('kendoGrid').saveChanges();
        }

如果是自己写的保存函数，则需要在保存函数里加上验证：

$("save_btn").click(function(){ 
        if($("#grid").data("kendoValidator").validate()){  // 验证
            // 保存操作
        }
    })

[SouthEast]: /images/1606664558904.png
[SouthEast 1]: /images/1606664582300.png
[SouthEast 2]: /images/1606664605831.png
[SouthEast 3]: /images/1606664629805.png