JavaScript DHTML/Ext JS/Form Validation

Материал из Web эксперт
Версия от 10:21, 26 мая 2010; Admin (обсуждение | вклад) (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>

</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>

asdf

</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>

asdf

</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>

asdf

</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>

asdf

</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>

asdf

</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>

asdf

</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>

asdf

</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>

asdf

</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>

asdf

</body> </html>


</source>