檢測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;
                 }
             }
             //檢測多選框是否至少有一項(xiàng)選中
             if(!testCheckRio('tzfbTzgh')||!testCheckRio('tzfbRz')){
                 alert("請至少選擇一項(xiàng)選項(xiàng)!");
                 return false;
             }
             if(eletype=='text'&&ele.id=='keyword1'){
                 if(!elevalue){
                     alert("請將表單內(nèi)容填寫完整!")
                     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. 當(dāng)input類型為Number時 輸入其他類型數(shù)據(jù)沒有value煌妈，maxlength沒有作用，需要用slice方法

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

date的樣式和功能設(shè)置

1. 改變默認(rèn)樣式
   http://www.zhangxinxu.com/study/201306/pseudo-elements-to-style-type-date.html

2. 移動端date的placeholder會顯示一片空白，初始效果也沒有，通過value值可以設(shè)置，但是必須是標(biāo)準(zhǔn)的日期格式

3. 解決方法
   i. 用偽類去為input模擬一個placeholder，這樣只是設(shè)置了placeholder，當(dāng)選擇了日期之后轴术，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設(shè)置placeholder顏色的css

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

file自定義樣式

1. 隱藏input，將它的點(diǎn)擊事件綁定在其他元素上
   <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);
});