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 阅读(495)
评论(0) 编辑 收藏 所属分类:
EasyUI