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