(三)jquery easyui常用form控件的使用
?easyui为我们提供的简单的验证功能,验证方法包括:数据格式的验证,长度的验证,是否为必输项的验证,将需要验证的属性配置到data-options中即可。
1 数据格式验证:
(1):必输项:
????????? <input name="name" data-options="required:true"></input>
?(2)格式的验证:
??????? ?<input name="email" data-options="validType:'email'"></input>
<input name="email" data-options="required:true,validType:'url'"></input>
(3)长度范围的验证:
????? <input data-options="validType:'length[1,3]'">
(4)numerbox:
????? <input id="nn" data-options="min:5.5,max:20,precision:2,required:true"/>
????? method:$('#mm').numberbox(setValue,getValue)
(5)numberspinner:
???? <input id="ss" data-options="min:10,max:100,required:true" style="width:80px;"></input>
???? <input 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" 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
???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 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;
?}