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;

 }