в 09:59, 26 мая 2010

2010-05-26T09:59:51Z

Admin: 1 версия

2010-05-26T07:21:26Z

1 версия

Новая страница

==Advanced Validation Examples Using VTypes==



<source lang="html4strict">


<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>

<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
// Add the additional "advanced" VTypes
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);
if(!date){
return;
}
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = Ext.getCmp(field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = Ext.getCmp(field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}
/*
* Always return true since we"re only using this vtype to set the
* min/max allowed values (these are tested for after the vtype test)
*/
return true;
},
password : function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText : "Passwords do not match"
});

Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = "side";
var bd = Ext.getBody();
/*
* Date Range
*/

var dr = new Ext.FormPanel({
labelWidth: 125,
frame: true,
title: "Date Range",
bodyStyle:"padding:5px 5px 0",
width: 350,
defaults: {width: 175},
defaultType: "datefield",
items: [{
fieldLabel: "Start Date",
name: "startdt",
id: "startdt",
vtype: "daterange",
endDateField: "enddt" // id of the end date field
},{
fieldLabel: "End Date",
name: "enddt",
id: "enddt",
vtype: "daterange",
startDateField: "startdt" // id of the start date field
}]
});
dr.render("dr");

});
</script>
<div id="dr">
</body>
</html>

</source>

==Create customized validation function for field==



<source lang="html4strict">

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();

var htmlEditor = {
xtype : "htmleditor",
fieldLabel : "",
anchor : "100% 100%",
allowBlank : false,
validateValue : function() {
var val = this.getRawValue();
return false;
}
}
var f = {
xtype : "form",
labelWidth : -20,
items : htmlEditor,
border : false
}
new Ext.Window({
title : "",
layout : "fit",
height : 300,
width : 600,
items : f,
buttons : [
{
text : "Is the html editor valid??",
handler : function() {
var isValid = Ext.getCmp("ext-comp-1003").form.isValid();
var msg = (isValid) ? "valid" : "invalid";
Ext.MessageBox.alert("Title", "The HTML Editor is " + msg);
}
}

]
}).show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>

</source>

==Customize your own message for validation==



<source lang="html4strict">

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

Ext.QuickTips.init();
var formPanelItems =[
{
fieldLabel : "URL",
allowBlank : false,
vtype : "urlOnly",
msgTarget : "title"

}
];
var myValidFn = function(v) {
var myRegex = /https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?/;
return myRegex.test(v);
}
Ext.apply(Ext.form.VTypes, {
urlOnly : myValidFn,
urlOnlyText : "Must a valid web url"
});
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 400,
title : "Title here",
height : 170,
frame : true,
bodyStyle : "padding: 5px",
monitorValid : true,
monitorPoll : 50,
labelWidth : 125,
defaultType : "textfield",
defaults : {
msgTarget : "side",
anchor : "-20"
},
items : formPanelItems,
});

});
</script>
<div id="div1">asdf</div>
</body>
</html>

</source>

==Define validation type==



<source lang="html4strict">

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
Ext.form.VTypes.nameVal = /^([A-Z]{1})[A-Za-z\-]+ ([A-Z]{1})[A-Za-z\-]+/;
Ext.form.VTypes.nameMask = /[A-Za-z\- ]/;
Ext.form.VTypes.nameText = "In-valid.";
Ext.form.VTypes.name = function(v){
return Ext.form.VTypes.nameVal.test(v);
};
new Ext.FormPanel({
url: "your.php",
renderTo: Ext.getBody(),
frame: true,
title: "Title",
width: 250,
items: [
{
xtype: "textfield",
fieldLabel: "Title",
name: "title",
vtype: "name"
}
]
});

});
</script>
<div id="div1">asdf</div>
</body>
</html>

</source>

==Define your own validation type==



<source lang="html4strict">

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

Ext.QuickTips.init();
var formPanelItems =[
{
fieldLabel : "URL",
allowBlank : false,
vtype : "urlOnly",
msgTarget : "title"

}
];
var myValidFn = function(v) {
var myRegex = /https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?/;
return myRegex.test(v);
}
Ext.apply(Ext.form.VTypes, {
urlOnly : myValidFn,
urlOnlyText : "Must a valid web url"
});
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 400,
title : "Title here",
height : 170,
frame : true,
bodyStyle : "padding: 5px",
monitorValid : true,
monitorPoll : 50,
labelWidth : 125,
defaultType : "textfield",
defaults : {
msgTarget : "side",
anchor : "-20"
},
items : formPanelItems,
});

});
</script>
<div id="div1">asdf</div>
</body>
</html>

</source>

==Mark a form field as required==



<source lang="html4strict">

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

Ext.QuickTips.init();
var formPanelItems =[
{
fieldLabel : "Alpha only",
allowBlank : false,
emptyText : "This field is empty!",
maskRe : /[a-z]/i,
msgTarget : "side",
}
];
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 400,
title : "Title here",
height : 170,
frame : true,
bodyStyle : "padding: 5px",
monitorValid : true,
monitorPoll : 50,
labelWidth : 125,
defaultType : "textfield",
defaults : {
msgTarget : "side",
anchor : "-20"
},
items : formPanelItems,
});

});
</script>
<div id="div1">asdf</div>
</body>
</html>

</source>

==Set alert message for empty input==



<source lang="html4strict">

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

Ext.QuickTips.init();
var formPanelItems =[
{
fieldLabel : "Alpha only",
allowBlank : false,
emptyText : "This field is empty!",
maskRe : /[a-z]/i,
msgTarget : "under",
}
];
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 400,
title : "Title here",
height : 170,
frame : true,
bodyStyle : "padding: 5px",
monitorValid : true,
monitorPoll : 50,
labelWidth : 125,
defaultType : "textfield",
defaults : {
msgTarget : "side",
anchor : "-20"
},
items : formPanelItems,
});

});
</script>
<div id="div1">asdf</div>
</body>
</html>

</source>

==Set mask regular expression==



<source lang="html4strict">

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

Ext.QuickTips.init();
var formPanelItems =[
{
fieldLabel : "Alpha only",
allowBlank : false,
emptyText : "This field is empty!",
maskRe : /[a-z]/i,
msgTarget : "side",
}
];
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 400,
title : "Title here",
height : 170,
frame : true,
bodyStyle : "padding: 5px",
monitorValid : true,
monitorPoll : 50,
labelWidth : 125,
defaultType : "textfield",
defaults : {
msgTarget : "side",
anchor : "-20"
},
items : formPanelItems,
});

});
</script>
<div id="div1">asdf</div>
</body>
</html>

</source>

==Set strip character regular expression==



<source lang="html4strict">

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

Ext.QuickTips.init();
var formPanelItems =[
{
fieldLabel : "Special Chars Only",
allowBlank : false,
msgTarget : "qtip",
stripCharsRe : /[a-zA-Z0-9]/ig
}
];
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 400,
title : "Title here",
height : 170,
frame : true,
bodyStyle : "padding: 5px",
monitorValid : true,
monitorPoll : 50,
labelWidth : 125,
defaultType : "textfield",
defaults : {
msgTarget : "side",
anchor : "-20"
},
items : formPanelItems,
});

});
</script>
<div id="div1">asdf</div>
</body>
</html>

</source>

==Use separate function as the validation function==



<source lang="html4strict">

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

Ext.QuickTips.init();
var formPanelItems =[
{
fieldLabel : "URL",
allowBlank : false,
vtype : "urlOnly",
msgTarget : "title"

}
];
var myValidFn = function(v) {
var myRegex = /https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?/;
return myRegex.test(v);
}
Ext.apply(Ext.form.VTypes, {
urlOnly : myValidFn,
urlOnlyText : "Must a valid web url"
});
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 400,
title : "Title here",
height : 170,
frame : true,
bodyStyle : "padding: 5px",
monitorValid : true,
monitorPoll : 50,
labelWidth : 125,
defaultType : "textfield",
defaults : {
msgTarget : "side",
anchor : "-20"
},
items : formPanelItems,
});

});
</script>
<div id="div1">asdf</div>
</body>
</html>

</source>

← Предыдущая	Версия 09:59, 26 мая 2010
(нет различий)

JavaScript DHTML/Ext JS/Form Validation - История изменений

в 09:59, 26 мая 2010

Admin: 1 версия