Easyui系列之表單radiobutton,Validatebox,Datebox（5）

1、radiobutton 單選框

單選框是我們經常會使用的一個功能，為了更好的掌握這個功能，有一些必要的知識點我們需要謹記的

創建

 <div data-toggle="topjui-radio">
                        <form id="ff">
                            <div style="margin-bottom:20px">
                                <input data-toggle="topjui-radiobutton" name="fruit" value="Apple" label="Apple:">
                            </div>
                            <div style="margin-bottom:20px">
                                <input data-toggle="topjui-radiobutton" name="fruit" value="Orange" label="Orange:">
                            </div>
                            <div style="margin-bottom:20px">
                                <input data-toggle="topjui-radiobutton" name="fruit" value="Banana" label="Banana:">
                            </div>
                        </form>
                    </div>

js創建

$('#rb').iRadiobutton({
                    label: 'Apple:',
                    value: 'Apple',
                    checked: true
                });

屬性

事件

方法

2、Validatebox 驗證框

驗證框（validatebox）是為了驗證表單輸入字段而設計的。如果用戶輸入無效的值，它將改變背景顏色，顯示警告圖標和提示消息。驗證框（validatebox）可與表單（form）插件集成，防止提交無效的字段。

這個功能在我們提交表單的時候經常使用

用法：

從標記創建驗證框（validatebox）。

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">

使用 javascript 創建驗證框（validatebox）。

<input id="vv">
$('#vv').validatebox({
required: true,
validType: 'email'
});

檢查密碼和重新輸入密碼是相同的。

// extend the 'equals' rule
$.extend($.fn.validatebox.defaults.rules, {
equals: {
validator: function(value,param){
return value == $(param[0]).val();
},
message: 'Field do not match.'
}
});

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
required="required" validType="equals['#pwd']">

驗證規則

驗證規則是通過使用 required 和 validType 屬性來定義的，這里是已經實施的規則：

• email：匹配 email 正則表達式規則。
• url：匹配 URL 正則表達式規則。
• length[0,100]：允許從 x 到 y 個字符。
• remote['http://.../action.do','paramName']：發送 ajax 請求來驗證值，成功時返回 'true' 。

要自定義驗證規則，

重寫 $.fn.validatebox.defaults.rules，來定義一個驗證函數和無效的信息。例如，定義一個 minLength 驗證類型：

$.extend($.fn.validatebox.defaults.rules, {
    minLength: {
        validator: function(value, param){
            return value.length >= param[0];
        },
        message: 'Please enter at least {0} characters.'
    }
});

現在您可以使用這個 minLength 驗證類型來定義一個至少輸入5個字符的輸入框：

<input class="easyui-validatebox" data-options="validType:'minLength[5]'">

 屬性

3、Datebox 日期框

日期框（datebox）把可編輯的文本框和下拉日歷面板結合起來，用戶可以從下拉日歷面板中選擇日期。在文本框中輸入的字符串可悲轉換為有效日期。被選擇的日期也可以被轉換為期望的格式。

用法

從標記創建日期框（datebox）。

<input id="dd" type="text" class="easyui-datebox" required="required">

使用 javascript 創建日期框（datebox）。

<input id="dd" type="text">
$('#dd').datebox({
required:true
});

屬性

該屬性擴展自組合（combo），下面是為日期框（datebox）添加的屬性。

button：array

 日歷下面的按鈕
代碼實例：

var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
text: 'MyBtn',
handler: function(target){
alert('click MyBtn');
}
});
$('#dd').datebox({
buttons: buttons
});

formatter ：function 

格式化日期的函數，該函數有一個 'date' 參數，並返回一個字符串值。下面的實例演示如何重寫默認的格式化（formatter）函數。

$.fn.datebox.defaults.formatter = function(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return m+'/'+d+'/'+y;
}

parser：function 

解析日期字符串的函數，該函數有一個 'date' 字符串，並返回一個日期值。下面的實例演示如何重寫默認的解析（parser）函數。

$.fn.datebox.defaults.parser = function(s){
    var t = Date.parse(s);
    if (!isNaN(t)){
        return new Date(t);
    } else {
        return new Date();
    }
}

事件

onSelect：date

當用戶選擇一個日期時觸發。
代碼實例：

$('#dd').datebox({
onSelect: function(date){
alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
}
});

方法

calendar

獲取日歷（calendar）對象。下面的實例演示如何獲取日歷（calendar）對象，然后重現它。

// get the calendar object
var c = $('#dd').datebox('calendar');
// set the first day of week to monday
c.calendar({
firstDay: 1
});

setValue

設置日期框（datebox）的值。
代碼實例：

$('#dd').datebox('setValue', '6/1/2012');    // set datebox value
var v = $('#dd').datebox('getValue');    // get datebox value