JavaScript DHTML/Ext JS/Form Validation — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 12:59, 26 мая 2010
Содержание
- 1 Advanced Validation Examples Using VTypes
- 2 Create customized validation function for field
- 3 Customize your own message for validation
- 4 Define validation type
- 5 Define your own validation type
- 6 Mark a form field as required
- 7 Set alert message for empty input
- 8 Set mask regular expression
- 9 Set strip character regular expression
- 10 Use separate function as the validation function
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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</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>
</body> </html>