EasyUI表单验证
来源:互联网 发布:九宫格日记软件 编辑:程序博客网 时间:2024/06/06 06:38
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 ,来定义一个验证函数和无效的信息。
特性
名称
类型
说明
默认值
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 的值。
- easyui表单验证easyui-validatebox
- easyui 验证表单
- EasyUI 表单验证注意事项
- easyui 表单验证
- jquery easyui 表单验证
- jquery easyui 表单验证
- easyui表单的验证
- easyui表单验证
- easyUI表单验证扩展
- jquery easyui 表单验证
- easyui表单验证
- jQuery easyui表单验证
- easyui 表单元素验证
- EasyUI表单验证
- easyui js 表单验证
- EasyUI表单验证
- Easyui 表单验证
- EasyUI 表单验证
- git切换分支保存修改的代码的方法
- mac环境变量
- TCP
- selenium 环境搭建(完整版)
- Haar小波
- EasyUI表单验证
- C程序的内存镜像
- label自适应高度
- Android开发提高代码效率的快捷模版
- [Tkinter 教程04] Variable 类
- jquery 推动效果
- meta学习笔记
- Http 请求
- 腾讯云 CentOS7 使用FileZilla通过SFTP快速实现文件上传