jQuery EasyUI基础教程之EasyUI常用组件(推荐)

2020-05-24 21:25:10易采站长站整理

validator:function(value){
var reg=/^[0-9]/;
if(reg.test(value)){
return true;
}
},
//如果不符合中文规则,
message:'密码必须为数字'
}
});
</script>

对于表单验证,我们可以对其进行自定义规则。这个时候如果加上正则验证,就完全可以写出一个非常好的验证功能的了。在上面的这个属性中,还可以对提示框的位置进行改变,可以使用的属性是left和right。下面图片中显示的就是一个提示框在left的情况,一般情况下使用默认的right就可以了。

6.2 ComboBox(下拉列表框)

扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。

下拉列表框显示一个可编辑文本框和下拉式列表,用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。

静态方法创建:


<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">
<option value="aa">aitem1</option>
<option>bitem2</option>
<option>bitem3</option>
<option>ditem4</option>
<option>eitem5</option>
</select>

动态方法创建:


<input id="cityID" name="city" value="1"/>
<script>
$("#cityID").combobox({
url:"json/city.json",
valueField:"id",
textField:"name"
});
$(function(){
$("#cityID").comcobox("setValue","长沙");
});
</script>

6.3 DateBox(日期输入框)

扩展自$.fn.combo.defaults。使用$.fn.datebox.defaults重写默认值对象。

日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。

日期:


<input id="dd" type="text"></input>
<script>
$('#dd').datebox({
required:true
});
$("#dd").datebox({
onSelect:function(mydate){
var year=mydate.getFullYear();
var month=mydate.getMonth()+1;
var date=mydate.getDate();
alert(year+"年"+month+"月"+date+"日");
}
});
</script>

6.4 Slider(滑动条)

使用$.fn.slider.defaults重写默认值对象。

滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候,将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。