我的漫漫程序之旅

专注于JavaWeb开发
随笔 - 39, 文章 - 310, 评论 - 411, 引用 - 0
数据加载中……

Ext Form 的 验 证

<HTML>
 
<HEAD>
  
<TITLE> form练习之验证 </TITLE>
  
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css"/>
  
<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
  
<script type="text/javascript" src="../../../ext-all.js"></script>
<script>
    Ext.onReady(
function()
    
{
        
//初始化快速提示
        Ext.QuickTips.init();
        
//将提示显示在form属性旁边
        Ext.form.Field.prototype.msgTarget = 'side';
        
//得到body对象
        var bd = Ext.getBody();
        
//创建一个h2标签
        bd.createChild({
            tag : 'h2',
            html: '
<a href="#">非常简单的From</a>'
        }
);

        
var simple = new Ext.FormPanel({
            labelWidth : 
75,
            url : 'http:
//www.blogjava.net/supercrsky',
            frame : true,
            title : '简单Form',
            bodyStyle : 'padding : 5px 5px 
0',
            width : 
350,
            draggable : 
true,
            defaults : 
{width : 230},
            defaultType : 'textfield',
            
//非ajax提交
            onSubmit: Ext.emptyFn,
            submit: 
function()
            
{
                
this.getForm().getEl().dom.submit();
            }
,

            items : [
                
{
                    fieldLabel : '姓名:',
                    name : 'username',
                    allowBlank : 
false,
                    blankText : '姓名不能为空'
                }
,
                
{
                    fieldLabel : '地址:',
                    name : 'address',
                    maxLength : 
20,
                    maxLengthText : '您输入的地址太长'
                }
,
                
{
                    fieldLabel : '公司',
                    name : 'company' ,
                    minLength : 
3 ,
                    minLengthText : '您输入的公司名称太短'
                }
,
                
{
                    fieldLabel : 'Email',
                    name : 'email',
                    vtype : 'email',
                    vtypeText : '您输入的邮箱格式不正确'
                }
,
                
//时间文本域
                new Ext.form.TimeField({
                    fieldLabel : 'Time',
                    name : 'time',
                    minValue : '
8:00am', //最小时间
                    maxValue : '6:00pm', //最大时间
                    increment: 1,    //间隔,单位为分钟,默认为15分钟
                    invalidText : '您输入的时间格式不正确'
                }
)
            ],
            
            buttons : [
                
{
                    text : '保存',
                    handler : 
function()
                    
{    
                        
//此方法在Class Ext.form.BasicForm里面,是FormPanel的父类
                        if(simple.getForm().isValid())
                        
{
                            simple.getForm().getEl().dom.action 
= 'http://www.blogjava.net/supercrsky',
                            simple.getForm().getEl().dom.submit();    
                        }

                    }

                }
,
                
{
                    text : '取消',
                    handler : 
function()
                    
{
                        simple.getForm().getEl().dom.reset();    
                    }

                }

            ]
        }
);
        
//渲染此form
        simple.render(document.body);
    }
);
</script>
 
</HEAD>
 
<BODY>
  
 
</BODY>
</HTML>


posted on 2008-08-26 13:57 々上善若水々 阅读(3016) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。


网站导航: