EasyUI表单验证
EasyUI表单验证
EasyUI的form表单里面的验证框，先讲解下validatebox类和相关的属性。
验证规则
验证规则是通过使用 required 和 validType 特性来定义的， 这里是已经实施的规则：
- email：匹配 email 正则表达式规则，系统提供的属性。
- url：匹配 URL 正则表达式规则
- length[0,100]：允许从 x 到 y 个字符
- remote['http://.../action.do','paramName']：发送 ajax 请求来验证值，成功时返回 'true' 。
要自定义验证规则，重写 $.fn.validatebox.defaults.rules ，来定义一个验证函数和无效的信息。例如，定义一个 minLength 验证类型：
1. .extend(.fn.validatebox.defaults.rules, {
2. minLength: {
3. validator: function(value, param){
4. return value.length >= param[0];
5. },
6. message: 'Please enter at least {0} characters.'
7. }
8. });
特性
名称 | 类型 | 说明 | 默认值 |
|---|---|---|---|
required | boolean | 定义是否字段应被输入。 | false |
validType | string | 定义字段的验证类型，比如 email、url，等等。 | null |
missingMessage | string | 当文本框是空时出现的提示文字。 | This field is required. |
invalidMessage | string | 当文本框的内容无效时出现的提示文字。 | null |
方法
名称 | 参数 | 说明 |
|---|---|---|
destroy | none | 移除并且销毁这个组件。 |
validate | none | 进行验证以判定文本框的内容是否有效。 |
isValid | none | 调用 validate 方法并且返回验证结果，true 或者 false。 |
<div id="userReg" class="easyui-panel" style="width:400px; height:300px;" title="注册用户">
<form action="" method="post">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" class="easyui-validatebox" required=true
validType="midLength[4,10]" value=""/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" name="password" class="easyui-validatebox" required=true validType="pwdLength[8]" value=""/></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" checked="checked" value="male"/>男
<input type="radio" name="sex" value="female"/>女
</td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" name="age" id="age" class="easyui-numberbox" value=""/></td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="text" style="width:160px"name="birth" id="birthday" class="easyui-datebox" value=""/></td>
</tr>
<tr>
<td>所属城市:</td>
<td><input type="text" name="city" class="easyui-combobox" valueField="id"
<span style="white-space:pre"> </span>url="combo_data.json" textField="name" value=""/></td>
</tr>
<tr>
<td>开始时间:</td>
<td><input type="text" id="startTime" name="startTime" class="easyui-datetimebox" value=""/></td>
</tr>
</tr>
<tr>
<td>结束时间:</td>
<td><input type="text" id="endTime" name="endTime" class="easyui-datetimebox" value=""/></td>
</tr>
<tr>
<td colspan="2">
<a class="easyui-linkbutton">保存</a>
</td>
</tr>
</table>
</form>
</div><script type="text/javascript">
$(function(){
$.extend($.fn.validatebox.defaults.rules,{
midLength:{
validator:function(value, param){
return value.length >= param[0] && value.length<=param[1];
},
message: '用户名必须在4到10位之间!'
},
pwdLength:{
validator:function(value,param){
return value.length==param[0];
},
message:'密码必须是8位'
}
});//数值验证控件;
$('#age').numberbox({
<span style="white-space:pre"> </span>min:0, //输入负数，变成0
<span style="white-space:pre"> </span>max:150,//输入大于150，变成150
<span style="white-space:pre"> </span>required:true,
<span style="white-space:pre"> </span>missingMessage:'年龄必填',
<span style="white-space:pre"> </span>precision:0
});
<span style="white-space:pre"> </span>//日期验证控件;
$('#birthday').datebox({
<span style="white-space:pre"> </span>required:true,
<span style="white-space:pre"> </span>missingMessage:'日期必填!',
<span style="white-space:pre"> </span>editable:false
});
//验证开始时间和结束时间;
$('#startTime,#endTime').datetimebox({
<span style="white-space:pre"> </span>required:true,
<span style="white-space:pre"> </span>missingMessage:'时间必填',
<span style="white-space:pre"> </span>editable:false
});
});
</script>参考图片如下：
Number数字框
特性
其特性扩展自 validatebox，下列是为 numberbox 增加的特性。
名称 | 类型 | 说明 | 默认值 |
|---|---|---|---|
disabled | boolean | 定义是否禁用该域。 | false |
min | number | 允许的最小值。 | null |
max | number | 允许的最大值。 | null |
precision | number | 显示在小数点后面的最大精度。 | 0 |
方法
其方法扩展自 validatebox，下列是为 numberbox 追加或重写的方法。
名称 | 参数 | 说明 |
|---|---|---|
disable | none | 禁用该域。 |
enable | none | 启用该域。 |
fix | none | 把值固定为有效的值。 |
日期框
依赖
- combo
- calendar
特性
其特性扩展自 combo，下列是为 datebox 增加的特性。
名称 | 类型 | 说明 | 默认值 |
|---|---|---|---|
panelWidth | number | 下拉日历面板的宽度。 | 180 |
panelHeight | number | 下拉日历面板的高度。 | auto |
currentText | string | 当前日期按钮上显示的文字。 | Today |
closeText | string | 关闭按钮上显示的文字。 | Close |
okText | string | 确定按钮上显示的文字。 | Ok |
disabled | boolean | 为 true 时禁用该域。 | false |
formatter | function | 格式化日期的函数，此函数有一个 'date' 参数，并返回一个字符串值。 | |
parser | function | 解析日期字符串的函数，此函数有一个 'date' 字符串参数，并返回一个日期值。 |
事件
名称 | 参数 | 说明 |
|---|---|---|
onSelect | date | 当用户选择一个日期时触发。 |
方法
其方法扩展自 combo，下列是为 datebox 重写的方法。
名称 | 参数 | 说明 |
|---|---|---|
options | none | 返回 options 对象。 |
calendar | none | 获取 calendar 对象。 |
setValue | value | 设置 datebox 的值。 |
ateTimeBox 日期时间框
依赖
- datebox
- timespinner
特性
其特性扩展自 datebox，下列是为 datetimebox 增加的特性。
名称 | 类型 | 说明 | 默认值 |
|---|---|---|---|
showSeconds | boolean | 定义是否显示秒的信息。 | true |
方法
其方法扩展自 datebox，下列是为 datetimebox 重写的方法。
名称 | 参数 | 说明 |
|---|---|---|
options | none | 返回 options 对象。 |
spinner | none | 返回 timespinner 对象。 |
setValue | value | 设置 datetimebox 的值。 |
腾讯云开发者
