关于表单

2018-03-15

百度前端学院中关于表单的问题。

一、每一项输入验证是否合法比较容易判断，最多也就是正则的匹配。我的实现思路是将每一项单独封装在一个函数中进行验证，主函数直接调用几个验证函数即可。单独的验证很容易，但是最后提交一个按钮需要整体验证，这个想了挺久。

实现思路是这样，每个函数返回一个值0或1，如果都为1，则提交，否则不提交。

但是在主函数里怎么才能调用到几个函数的值呢？一开始我是在几个验证函数里直接返回0或1，发现行不通，因为代码是这样：

btn.onclick=function(){
    if(name()&&password()){
        submit;
    }
}

function name(){
  var s=0；
  var name=document.getElementById("name");
  var word=document.getElementById("word");
  name.addEventListener("focus",function(){
    name.style.color="blue";
    word.innerHTML='长度为4-16字符';
});
  name.addEventListener("blur",function(){
    if(name.value.length>3&&name.value.length<17){
      name.style.color="green";
      word.innerHTML='格式正确';
      s=1;
    }
    else{
      name.style.color="red";
      word.innerHTML='格式错误';
      s=0;
    }
});
  return s;
};

每次一点击，几个验证函数就会重新执行一遍，相当于初始化值总是0，根本执行不到下面，后来觉得if后面不能是name（）函数，如果是这个函数肯定初始化就是0，必须把它在前面就赋值给另一个常量。代码变成了这样：

var a=name(),b=password();
btn.onclick=function(){
    if(a&&b){
        submit;
    }
}

但是这样也不对啊，a就是name，初始化就是0，a的值就是0，也不会变的，这可怎么办呢？如何才能实现验证成功后改变a的值呢？

后来有了个解决方法，在验证函数中返回一个对象，这个对象里有s。像这样：

var result={
   s:0
 };

这样就可以调用a.s来实现返回值的变化了。a的值变成了一个对象，a.s可以变化。具体如此改动：

var a=name(),b=password();
btn.onclick=function(){
    if(a.s&&b.s){
        submit;
    }
}



function name(){
  var result={
    s:0
  };
  var name=document.getElementById("name");
  var word=document.getElementById("word");
  name.addEventListener("focus",function(){
    name.style.color="blue";
    word.innerHTML='长度为4-16字符';
});
  name.addEventListener("blur",function(){
    if(name.value.length>3&&name.value.length<17){
      name.style.color="green";
      word.innerHTML='格式正确';
      result.s=1;
    }
    else{
      name.style.color="red";
      word.innerHTML='格式错误';
      result.s=0;
    }
});
  return result;
};

二、表单联动

两个个下拉框，实现点击其中一个另一个的内容跟着变化。

其实很简单，选择第一个元素，如果值是xx，则将第二个表单的option换掉。

或者使用selectObject.add(option)方法，用于向 < select> 添加一个 < option> 元素。

一开始没想到有这个方法，是用的innerHTML=几个option的值。先把几个option用字符串接在一起，然后直接innerHTML=str。option的值是存在一个对象里的。如下：

var list={
  bj:['清华大学','北京大学','复旦大学'],
  nj:['南京大学','南京理工大学','南京师范大学']
}  

var str1='';
var str2='';
for(let i=0;i<list.bj.length;i++){
  str1+='<option>'+list.bj[i]+'</option>';
}
for(let i=0;i<list.nj.length;i++){
  str2+='<option>'+list.nj[i]+'</option>';
}

sel1.onclick=function(){
  if(sel1.value==='bj'){
    sel2.innerHTML=str1;
  }
  if(sel1.value==='nj'){
    sel2.innerHTML=str2;
}
  }

还有一个是点击按钮显示一个另一个不显示，这个比较简单，先设置display：none，再在js里设置block就可以显示出来了。