JavaScript DHTML/Ext JS/Form Validation

Материал из Web эксперт
Перейти к: навигация, поиск

Advanced Validation Examples Using VTypes

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code from ext3.0.0 -->
<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>



Create customized validation function for field

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



Customize your own message for validation

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



Define validation type

  

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



Define your own validation type

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



Mark a form field as required

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



Set alert message for empty input

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



Set mask regular expression

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



Set strip character regular expression

  

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



Use separate function as the validation function

  
<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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Form_Validation&oldid=2423»