一、美化表单:
ExtJS自带的CSS效果可以让表单非常漂亮,在使用前先将ext-all.css文件导入页面,然后加入以下代码
二、绑定及验证表单:
以上只是将表单显示出来了,如需对表单域操作,还需要在JS里写相关的代码进行绑定
ExtJS能对表单进行非常灵活的验证,上面是将表单的字段绑定起来,同时添加了相应的验证,并且也支持自定义函数验证,以下是对比2个输入框密码是否相同的自定义函数
ExtJS自带的CSS效果可以让表单非常漂亮,在使用前先将ext-all.css文件导入页面,然后加入以下代码
<
div
class
="x-box-ml"
>
< div class ="x-box-mr" >
< div class ="x-box-mc" >
< form id ="regform" >
< fieldset align ="middle" >
< legend >< font class ="btitle" color ="#ff7300" >< strong class ="style7" > 帐号信息 </ strong ></ font ></ legend >
< table width ="100%" align ="center" >
< tr >
< td style ="text-align: right" >
会员Email:
</ td >
< td style ="text-align: left" width ="300" >
< input type ="text" id ="UserEmail" name ="UserEmail" /> < span id ="msg" style ="display: none" ></ span >
</ td >
</ tr >
< tr >
< td style ="text-align: right" >
登录密码:
</ td >
< td style ="text-align: left" >
< input id ="UserPwd" name ="UserPwd" type ="password" />
</ td >
</ tr >
< tr >
< td style ="text-align: right" >
密码确认:
</ td >
< td style ="text-align: left" >
< input id ="UserPwd1" name ="UserPwd1" type ="password" />
</ td >
</ tr >
</ table >
</ fieldset >
< div id ="regbutton" >
</ div >
</ form >
</ div >
</ div >
</ div >
< div class ="x-box-bl" >
< div class ="x-box-br" >
< div class ="x-box-bc" >
</ div >
</ div >
</ div >
< div class ="x-box-mr" >
< div class ="x-box-mc" >
< form id ="regform" >
< fieldset align ="middle" >
< legend >< font class ="btitle" color ="#ff7300" >< strong class ="style7" > 帐号信息 </ strong ></ font ></ legend >
< table width ="100%" align ="center" >
< tr >
< td style ="text-align: right" >
会员Email:
</ td >
< td style ="text-align: left" width ="300" >
< input type ="text" id ="UserEmail" name ="UserEmail" /> < span id ="msg" style ="display: none" ></ span >
</ td >
</ tr >
< tr >
< td style ="text-align: right" >
登录密码:
</ td >
< td style ="text-align: left" >
< input id ="UserPwd" name ="UserPwd" type ="password" />
</ td >
</ tr >
< tr >
< td style ="text-align: right" >
密码确认:
</ td >
< td style ="text-align: left" >
< input id ="UserPwd1" name ="UserPwd1" type ="password" />
</ td >
</ tr >
</ table >
</ fieldset >
< div id ="regbutton" >
</ div >
</ form >
</ div >
</ div >
</ div >
< div class ="x-box-bl" >
< div class ="x-box-br" >
< div class ="x-box-bc" >
</ div >
</ div >
</ div >
二、绑定及验证表单:
以上只是将表单显示出来了,如需对表单域操作,还需要在JS里写相关的代码进行绑定
var
fm2
=
new
Ext.form.BasicForm('regform');
// 加入验证框
fm2.add( new Ext.form.TextField( {
allowBlank: false,//不能为空
blankText:'EMAIL不能为空,且请确保有效地址!',
//regex:re,//正则验证
invalidText:'EMAIL格式不正确或此EMAIL已被注册!',
validator:checkEmail//自定义验证函数
} ).applyTo(userEmail));
fm2.add( new Ext.form.TextField( {
allowBlank: false,//不能为空
blankText:'密码不能为空!'
} ).applyTo(Ext.get('UserPwd')));
fm2.add( new Ext.form.TextField( {
allowBlank: false,//不能为空
blankText:'密码不能为空!',
invalidText:'2次密码不相同!',
validator:vailda//自定义验证函数
} ).applyTo(Ext.get('UserPwd1')));
fm2.add( new Ext.form.TextField( {
allowBlank: false,//不能为空
blankText:'会员名称不能为空!'
} ).applyTo('CustomerName'));
// 加入验证框
fm2.add( new Ext.form.TextField( {
allowBlank: false,//不能为空
blankText:'EMAIL不能为空,且请确保有效地址!',
//regex:re,//正则验证
invalidText:'EMAIL格式不正确或此EMAIL已被注册!',
validator:checkEmail//自定义验证函数
} ).applyTo(userEmail));
fm2.add( new Ext.form.TextField( {
allowBlank: false,//不能为空
blankText:'密码不能为空!'
} ).applyTo(Ext.get('UserPwd')));
fm2.add( new Ext.form.TextField( {
allowBlank: false,//不能为空
blankText:'密码不能为空!',
invalidText:'2次密码不相同!',
validator:vailda//自定义验证函数
} ).applyTo(Ext.get('UserPwd1')));
fm2.add( new Ext.form.TextField( {
allowBlank: false,//不能为空
blankText:'会员名称不能为空!'
} ).applyTo('CustomerName'));
ExtJS能对表单进行非常灵活的验证,上面是将表单的字段绑定起来,同时添加了相应的验证,并且也支持自定义函数验证,以下是对比2个输入框密码是否相同的自定义函数
/**
* 验证密码是否相同
*/
function vailda()
{
if(Ext.get('UserPwd').dom.value==Ext.get('UserPwd1').dom.value)
return true;
else
return false;
}
* 验证密码是否相同
*/
function vailda()
{
if(Ext.get('UserPwd').dom.value==Ext.get('UserPwd1').dom.value)
return true;
else
return false;
}