form表單組件主要有以下內容（如下圖）
1. validatebox驗證框
姓名：必填/1-4個字符/必填中文
郵箱：必填/1-30個字符/必填符合郵箱格式/后綴必須是com或cn
密碼驗證：
<div style="margin:100px"></div> 用戶名: <input id="vv" /> <!-- 因為在下面js代碼中聲明了這是個驗證框【 $("#vv").validatebox({}) 】，所以可以不加class="",否則需要加上【參考 #pwd】 --> <p/> 郵 箱： <input id="email" /><p/> 密 碼： <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true" /><p/> 驗證密碼： <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox" required="required" validType="equals['#pwd']" /> <script type="text/javascript"> $("#vv").validatebox({ //聲明了這是個驗證框,且增加語法限制 required : true, validType : [ "length[1,4]", "zhongwen" ] //設置了字符長度限制，中文規則自定義 }); $("#email").validatebox({ required : true, validType : [ "length[1,30]", "email" ] //email規則已經實現,無序自定義 }); </script> <script type="text/javascript"> //自定義驗證規則 $.extend($.fn.validatebox.defaults.rules, { zhongwen : { validator : function(value) {//value表示在文本框中輸入的內容 if (/^[\u3220-\uFA29]+$/.test(value)) { return true; } }, message : "用戶名必須填中文" }, equals : { validator : function(value, param) { return value == $(param[0]).val(); }, message : "密碼不匹配" } }); </script>
2. combobox下拉列表框
2.1 直接設置多選項<select>...<option>...
你所在的城市： <select id="cc" class="easyui-combobox" name="city" style="width:150px;"> <option>aitem1</option> <option>bitem1</option> <option>bitem2</option> <option>citem1</option> <option>citem2</option> <option>citem3</option> <option>ditem1</option> <option>ditem2</option> <option>ditem3</option> <option>ditem4</option> </select> <script type="text/javascript"> $(function(){ $("#cc").combobox("setValue","長沙"); }); </script>
2.2 當數據量過多時，此時再利用 select 就很不方便，此時應該將選項保存到json文件中來引入
你所在的城市： <input id="cc" name="city" value="廣州" /> <script type="text/javascript"> $("#cc").combobox({ //url表示引入json文件的路徑 //textField表示在下拉框中看得見的內容,<option>長沙</option> //valueField表示在下拉框中看不見的內容，用於向后台傳遞數據<option value="cs">長沙</option> url : "combobox_data.json", valueField : "id", textField : "text" }); </script>
combobox_data.json 文件
[
{
"id":"gz",
"text":"廣州"
},
{
"id":"zs",
"text":"中山"
},
{
"id":"fs",
"text":"佛山"
},
{
"id":"sz",
"text":"深圳",
"selected":true
},
{
"id":"yj",
"text":"陽江"
}
]
因為鏈接到外面的 json文件，此時直接訪問該文件可能只顯示多選框而沒有數據，需要將其發布到服務器上來得到期望的效果
3. datebox日期選擇框
默認顯示yyyy-mm-dd格式，
想要顯示中文信息需要添加<script type="text/javascript" src="locale/easyui-lang-zh_CN.js"></script>
選中日期並顯示選中的日期
入職時間：<input id="dd" type="text"></input> <script type="text/javascript"> $("#dd").datebox({ required:true }); </script> <script type="text/javascript"> $("#dd").datebox({ onSelect:function(date){ alert(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()); } }); </script>
4. numberspinner數字微調框
設置數字微調框中的值
商品數量： <input type="text" size="2px" value="1" /> <span></span> <hr /> <input id="ss" required="required" style="width:90px;"> <script type="text/javascript"> $("#ss").numberspinner({ value : 1, min : 1, max : 100, editable : true }); </script>
獲取數字微調框中的值（上調或下調時及時顯示），框內輸入后敲擊回車也及時顯示框內數據
購買數量： <input id="ss" class="easyui-numberspinner" style="width:100px" /> <script type="text/javascript"> $("#ss").numberspinner({ value : 1, min : 1, max : 100, editable : true //默認可編輯 }); </script> <p /> 你一共購買了 <span id="num">1</span>件商品。。。 <script type="text/javascript"> $("#ss").numberspinner({ onSpinUp : function() { //獲取數字微調的當前值 var value = $("#ss").numberspinner("getValue"); $("#num").text(value).css("color", "red"); //如果value值為100 if (value == 100) { $("span:first").html("商品已滿，不能再購買了").css("color", "blue"); $("input:first").attr("disabled", "disabled"); } }, onSpinDown : function() { //獲取數字微調的當前值 var value = $("#ss").numberspinner("getValue"); $("#num").text(value).css("color", "blue"); //如果value值小於100 if (value < 100) { $("span:first").html(""); $("input:first").removeAttr("disabled"); } } }); </script> <script type="text/javascript"> $("#ss").keyup(function(xxx) { //將瀏覽器產生的事件對象設置到myevent變量中 var myevent = xxx; //獲取按鍵的unicode碼 var code = myevent.keyCode; var value = $(this).val(); //如果按鈕是回車 if (code == 13 && value<100 && value>1) { //添加一些約束 $("#num").text(value).css("color", "red"); } }); </script>
5. slider滑動條框
拖動滑塊，將值同步顯示到span標簽中
身高： <span>150</span> <span id="tip"></span> <div style="margin:50px"> <input id="ss" class="easyui-slider" value="0" style="width:600px;height:500px" data-options="max:180,min:150,showTip:true,rule:[150,'|',160,'|',170,'|',180]" /> </div> <script type="text/javascript"> $("#ss").slider({ onChange : function(newValue) { $("span:first").text(newValue); if (newValue == 180) { $("#tip").text("身高可以"); } else if (newValue >= 170) { $("#tip").text("國民平均"); } else if (newValue >= 160) { $("#tip").text("還需努力"); } } }); </script>