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 ，来定义一个验证函数和无效的信息。

特性

名称	类型	说明	默认值
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 的值。