Form元素使用笔记（节）

检测input的输入值

1. 检测输入值的合法性

2. 检测是否有值

     function testVal(obj){
         for(var i=0;i<obj.length;i++){
             console.log(obj.elements[i].type);
             var ele=obj.elements[i];
             var eletype=ele.type||"";
             var elevalue=ele.value||"";
             if(eletype=='file'){
                 if(!elevalue){
                     alert("请选择上传附件!")
                     return false;
                 }
             }
             //检测多选框是否至少有一项选中
             if(!testCheckRio('tzfbTzgh')||!testCheckRio('tzfbRz')){
                 alert("请至少选择一项选项!");
                 return false;
             }
             if(eletype=='text'&&ele.id=='keyword1'){
                 if(!elevalue){
                     alert("请将表单内容填写完整!")
                     ele.focus();
                     return false;
                 }
             }
             if(eletype=='date'){
                 if(!elevalue){
                     alert("请选择时间!")
                     return false;
                 }
             }
         }
         return true;
     }
   
   

3. 检测多选框是否至少选中一个值

         function testCheckRio(iptName){
             var chks=$(".checkbox-row input[type=checkbox][name="+iptName+"]");
             var number=0;
             $.each(chks,function(index){
                 if(chks[index].checked==true){
                     number++;
                 }
             }) 
             if(number<=0){
                 return false;
             }else{
                 return true;
             }
         }
   
   

4. 当input类型为Number时 输入其他类型数据没有value，maxlength没有作用，需要用slice方法

<input type="number" oninput="if(value.length>5) value=value.slice(0,5)" />

date的样式和功能设置

1. 改变默认样式
   http://www.zhangxinxu.com/study/201306/pseudo-elements-to-style-type-date.html

2. 移动端date的placeholder会显示一片空白，初始效果也没有，通过value值可以设置，但是必须是标准的日期格式

3. 解决方法
   i. 用伪类去为input模拟一个placeholder，这样只是设置了placeholder，当选择了日期之后，placeholder还是存在

             input[type="date"]:before{
                 content: attr(placeholder);
                 color:red;
             }
   
   

   ii. JS配合使用

             function pickTime(iptName){
                 var o = document.getElementById(iptName);
                 o.onfocus = function(){
                     this.removeAttribute('placeholder');
                 };
                 o.onblur = function(){
                     if(this.value == '') this.setAttribute('placeholder','请输入日期');
                 };
             }
   
   

   iii. 非date类型的input设置placeholder颜色的css

::-webkit-input-placeholder {
   color:red;
}

file自定义样式

1. 隐藏input，将它的点击事件绑定在其他元素上
   <a class="btn" onclick="$('input[id=introfile]').click();">选择上传</a>
2. 还可以同步将选择到的文件的文件名显示到页面上

$('input[id=introfile]').change(function() {
          var file = $(this).val();
          var fileName = getFileName(file);
          function getFileName(o) {
              var pos = o.lastIndexOf("\\");
              return o.substring(pos + 1);
          }
          $('#introfileName').text(fileName);
});