DWZ主从表界面唯一性验证（自写js）（二）

　　上篇介绍了自写js判断的前三项，本篇博客介绍第四步，关于触发课程代码文本框的离开事件后，判断一整列的课程代码之间是否有重复的值。

　　此问题可以提取为判断一个数组里是否有重复值，重复值是什么。

　第四步→判断界面唯一性，获取各行code值。

　　通过观察，主从表下每一行的课程代码文本框都有一个数组样式的name属性，如：name="courseList[#index#].code" 

　　查看代码可知，每一行的课程代码都有不同的name，那么怎么获取这些不同name的对象数组呢？

　　

　　通过反复试验，我最后得出一种方法，步骤是：先获得主从表内所有标签为<input>的对象，然后通过获取他们的name属性的值，来匹配。

　　具体匹配方法就是观察各个name之间的不同。

　　课程代码对应的name类型为：name="courseList[#index#].code" 

　　课程名称对应的name类型为：name="courseList[#index#].name" 

　　所以，通过观察，只要匹配code字符串就可以获取到一列的课程代码的对象数组了。

　　拿到这个数组，就开始遍历，是否数组内有重复值，如果有重复值，就把它放在第三方的数组里，最后弹出框里显示这些重复值。

　　具体的js代码如下：

　　

  //4、判断界面唯一性，获取各行code值
   
            //4.1获得code列
                     //4.11获得表格
        var table = document.all("parentTable");
                    //4.12获得表格下的所有文本框
        var input=table.getElementsByTagName("input");
                    //4.13定义一个空数组来装得到的code列
        var resultCodeString=[];
                   //4.14循环遍历出code列，并将code文本框的值放到定义的空数组resultCodeString中
            for(i=0;i<input.length;i++){
                //利用lastIndexOf来匹配，如果有code字符串则返回大于-1的值，
                if(input[i].name.lastIndexOf("code")>-1){
                    //alert(input[i].value);
                    //如果name中匹配到了code，则将这个文本框的值放到我们的code数组里。
                    resultCodeString[resultCodeString.length] =input[i].value;
                    
                }
            }
                   //测试数组容器的长度
            //alert(resultCodeString.length);
            //定义一个第三方数组，来装重复值
            var showMessage=[];
            //遍历得到的code数组容器
            for(i=0;i<resultCodeString.length;i++){
                //测试是否是code列中的值
                //alert(resultCodeString[i]);
                //以下为判断是否重复的方法，并将重复值放在数组里。
                //先排序
                var resultCode=resultCodeString.sort();
                 for(var i=0;i<resultCodeString.length;i++){
                     if(resultCodeString[i] != ""){
                         if (resultCode[i]==resultCode[i+1]){
                             showMessage[showMessage.length] =resultCode[i];
                             }
                     }
                
                }
                // alert(showMessage.length);
                 // alert("数组重复内容为："+showMessage[i]);
                 
                 //因为我们得到的重复数据会有重复的，所以需要数组去重，这里调用了unique方法，具体实现见下面的代码
                 var arr=showMessage.unique();
                 if(arr!=""){
                    // alert("课程代码有重复，重复值为"+arr);
                     alertMsg.warn( "课程代码有重复，重复值为"+arr);
                 }
                    
            }

　　JS实现得数组去重的三种方法：借鉴于《三种常用的js数组去重方法》

　　

/* 第一种去重的方法 */
 /* Array.prototype.unique = function(){
        var res = [this[0]];
        for(var i = 1; i < this.length; i++){
            var repeat = false;
            for(var j = 0; j < res.length; j++){
                if(this[i] == res[j]){
                    repeat = true;
                    break;
                }
            }
            if(!repeat){
                res.push(this[i]);
            }
        }
        return res;
    } */
    /* 第二种去重的方法 */
/*     Array.prototype.unique = function(){
    this.sort();    //先排序
    var res = [this[0]];
    for(var i = 1; i < this.length; i++){
        if(this[i] !== res[res.length - 1]){
            res.push(this[i]);
        }
    }
    return res;
} */
    /* 第三种去重的方法 */
    Array.prototype.unique = function(){
        var res = [];
        var json = {};
        for(var i = 0; i < this.length; i++){
            if(!json[this[i]]){
                res.push(this[i]);
                json[this[i]] = 1;
            }
        }
        return res;
    }

　　最后效果显示：

　　

　　虽然已经触发了课程代码文本框来进行了验证，但是如果用户不看提示框，仍旧一意孤行，也不是办法，所以后台仍要对应的判断。具体后台怎么进行判断，请看下篇博客分析。