EasyUI表单验证
视频课：https://edu.csdn.net/course/play/7621
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 的值。 |
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/51943997
- 点赞
- 收藏
- 关注作者
评论（0）