标签：EasyUI 验证 validatebox 特性 表单 value datebox true
视频课：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 的值。 |
标签：EasyUI,验证,validatebox,特性,表单,value,datebox,true 来源： https://blog.51cto.com/2096101/2588800
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。