隨筆 - 6  文章 - 129  trackbacks - 0
          <2025年7月>
          293012345
          6789101112
          13141516171819
          20212223242526
          272829303112
          3456789

          常用鏈接

          留言簿(14)

          隨筆檔案(6)

          文章分類(467)

          文章檔案(423)

          相冊

          收藏夾(18)

          JAVA

          搜索

          •  

          積分與排名

          • 積分 - 828827
          • 排名 - 49

          最新評論

          閱讀排行榜

          評論排行榜

          jquery easyui常用form控件的使用(轉)
          easyui為我們提供的簡單的驗證功能,驗證方法包括:數據格式的驗證,長度的驗證,是否為必輸項的驗證,將需要驗證的屬性配置到data-options中即可。

          1 數據格式驗證:

          (1):必輸項:
          
                    <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input>
          
           (2)格式的驗證:
          
                   <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'"></input>
          
          <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'url'"></input>
          
          (3)長度范圍的驗證:
          
                <input class="easyui-validatebox" data-options="validType:'length[1,3]'">
          
          (4)numerbox:
          
                <input id="nn" class="easyui-numberbox" data-options="min:5.5,max:20,precision:2,required:true"/>
          
                method:$('#mm').numberbox(setValue,getValue)
          
          (5)numberspinner:
          
               <input id="ss" class="easyui-numberspinner" data-options="min:10,max:100,required:true" style="width:80px;"></input>
               <input class="easyui-numberspinner" value="1000" data-options="increment:100" style="width:120px;"></input>
          
          (6)combo
          
           <div id="sp">
            <div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div>
            <input type="radio" name="lang" value="01"><span>Java</span><br/>
            <input type="radio" name="lang" value="02"><span>C#</span><br/>
            <input type="radio" name="lang" value="03"><span>Ruby</span><br/>
            <input type="radio" name="lang" value="04"><span>Basic</span><br/>
            <input type="radio" name="lang" value="05"><span>Fortran</span>
           </div>
          
          js:  $(function(){
             $('#cc').combo({
              required:true,
              editable:false
             });
             $('#sp').appendTo($('#cc').combo('panel'));
             $('#sp input').click(function(){
              var v = $(this).val();
              var s = $(this).next('span').text();
              $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
             });
            });
          
          (7)combobox:
          
          I: <select id="cc" class="easyui-combobox" name="state" style="width:200px;" data-options="required:true">
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
           </select>
          
          II: <input class="easyui-combobox"
             name="language"
             data-options="
               url:'combobox_data.json',
               valueField:'id',
               textField:'text',
               multiple:true,
               panelHeight:'auto'
             ">
          
          method:  function loadData(){
             $('#cc').combobox({
              url:'combobox_data.json',
              valueField:'id',
              textField:'text'
             });
            }
            function setValue(){
             $('#cc').combobox('setValue','CO');
            }
            function getValue(){
             var val = $('#cc').combobox('getValue');//如果是多選,則調用方法:getValues,return:val1,val2,val3
             alert(val);
            }
            function disable(){
             $('#cc').combobox('disable');
            }
            function enable(){
             $('#cc').combobox('enable');
            }
          
           
          
          (8)datepicker
          
              <input class="easyui-datebox" data-options="formatter:formatDate">
          
              js:function formatterDate(data){
          
               var year = date.getFullYear();
          
               var month = date.getMonth + 1;
          
               var date = date.getDate();
          
              if(month < 10){
          
                month = '0' + month;
          
           }
          
             return year + '-' + month + '-' + date;
          
           }


          posted on 2014-09-16 19:20 Ke 閱讀(515) 評論(0)  編輯  收藏 所屬分類: EasyUI
          主站蜘蛛池模板: 平果县| 白银市| 靖江市| 揭西县| 锦州市| 泗阳县| 惠安县| 金沙县| 南通市| 和平县| 那曲县| 林西县| 辽阳市| 永清县| 奎屯市| 巴林左旗| 漯河市| 鄢陵县| 龙山县| 长岭县| 天气| 黄平县| 景德镇市| 松江区| 新疆| 禄丰县| 安阳县| 白河县| 重庆市| 大丰市| 沅陵县| 镶黄旗| 乐业县| 高尔夫| 榆树市| 河南省| 卫辉市| 鹤壁市| 沈丘县| 大方县| 盐源县|