Common validation summaries for Extjs forms

 
//In the onReady function(){}
Ext.QuickTips.init(); //The main prompt message for the component is the error message for the client validation.
Ext.form.Field.prototype.msgTarget='side'; //Prompt mode, the enumeration value is:

Qtip - displays a prompt when the mouse moves over the control;
Title - displays in the browser title, but the test result is the same as qtip;
Under - displays an error message under the control;
Side - displays an error icon on the right side of the control and displays an error when the mouse points to the icon.
An id-[element id] error is displayed in the HTML element with the specified id

1. The simplest example: null validation

 
//Two arguments for null validation
allowBlank:false//False cannot be null and defaults to true
blankText:string//Error message when null

Js code is:

 
var form1 = new Ext.form.FormPanel({ 
width:350, 
renderTo:"form1", 
title:"FormPanel", 
defaults:{xtype:"textfield",inputType:"password"}, 
items:[ 
{fieldLabel:" Can't be empty ", 
allowBlank:false, //Not allowed to be empty
blankText:" Can't be empty ", //Error message, default to This field is required!
id:"blanktest", 
} 
] 
}); 

2. Use vtype format for simple validation.
In the example of this mail validation, rewrite the above code for the items configuration:

 
items:[ 
{fieldLabel:" Can't be empty ", 
vtype:"email",//Email format validation
vtypeText:" Not a valid email address ",//Error message, default value I will not say
id:"blanktest", 
anchor:"90%" 
} 
 You can modify the above vtype For the following extjs the vtype Verification supported by default:  
//The default supported type for vtype in form validation

1. Alpha // can only input letters, other (such as Numbers, special symbols, etc.) cannot be input.
Alphanum // can only input letters and Numbers, not anything else
3. Email //email verification, the required format is ""
4. Url //url format validation, the required format is http://www.baidu.com

3. Advanced custom password verification
The previous validation is already provided by extjs, and we can also customize the validation function.

 
//Add the custom password validation function with the ext.apply method (you can also call it something else)
Ext.apply(Ext.form.VTypes,{ 
password:function(val,field){//Val is the textbox value, and field is the textbox component
if(field.confirmTo){//ConfirmTo is our custom configuration parameter that is used to hold the id values of other components
var pwd=Ext.get(field.confirmTo);//Gets the value of the id of confirmTo
return (val==pwd.getValue()); 
} 
return true; 
} 
}); 
//Configure the items parameter
items:[{fieldLabel:" password ", 
id:"pass1", 
},{ 
fieldLabel:" Confirm password ", 
id:"pass2", 
vtype:"password",//Custom validation type
vtypeText:" The two passwords don't match! ", 
confirmTo:"pass1",//The id of the other component to compare
} 

4. Use regular expression validation

 
new Ext.form.TextField({ 
fieldLabel : " The name ", 
name : "author_nam", 
regex : /[u4e00-u9fa5]/, //Regular expressions in /... [u4e00-u9fa5] : Chinese only.
regexText:" Chinese only !", //Regular expression error
allowBlank : false //This validation is still valid. It cannot be null.