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

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的，效果如图。这两种情况下边框会变红，但是鼠标移入就浮现文字消息，移出则消失：

验证样式二：
```
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
    });

```

如图，这两种情况下移入移出都一样，边框不会变红，但是文字提示一直存在，直到输入然后重新校验：

验证样式三：
```
 $("#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>

保存

对头部信息（表单信息）进行保存的时候，基本上业务需求都是点击保存，如果不符合的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()){  // 验证
        // 保存操作
    }
})