|
|
 <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.aygfsteel.com/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.aygfsteel.com/supercrsky',
simple.getForm().getEl().dom.submit();
}
}
},
{
text : '取消',
handler : function()
{
simple.getForm().getEl().dom.reset();
}
}
]
});
//渲染此form
simple.render(document.body);
 });
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
|