Summary of common validations for Extjs forms_extjs

Copy code The code is as follows:

//Place it in onReady’s function(){}
Ext.QuickTips.init(); //Provide prompt information function for components. The main prompt information of form is the error message of client verification.
Ext.form.Field.prototype.msgTarget='side'; //Prompt method, enumeration value is:

qtip-Display prompt when the mouse moves over the control;
title-displayed in the title of the browser, 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 when the mouse points to the icon Display error prompt. Default value;
id-[element id] error prompt is displayed in the HTML element of the specified id

1. The simplest example: empty verification

Copy code The code is as follows:

//Two parameters of null verification
allowBlank:false//false cannot be Empty, the default is true
blankText:string//The error message when it is empty

js code is:

Copy Code The code is as follows:

var form1 = new Ext.form.FormPanel({
width:350,
renderTo:"form1",
title:"FormPanel",
defaults:{xtype:"textfield",inputType:"password"},
items:[
{fieldLabel:"cannot be blank",
allowBlank: false, //Null is not allowed
blankText: "Cannot be blank", //Error message, the default is This field is required!
id: "blanktest",
}
]
});

2. Use vtype format for simple verification.
Here is an example of email verification, rewrite the items configuration of the above code:

Copy the code The code is as follows:

items:[
{fieldLabel:"cannot be empty",
vtype:"email",//email format verification
vtypeText:"not a valid email address",/ /Error message, I won’t mention the default values ​​
id: "blanktest",
anchor: "90%"
}
You can modify the above vtype to the following extjs Verification supported by vtype by default:
//Default supported type of vtype in form verification

1.alpha //Only letters can be entered, others (such as numbers, special symbols, etc.) cannot be entered
2.alphanum//Only letters and numbers can be entered, others cannot be entered
3.email//email verification, the required format is ""
4.url//url format verification, the required format is http://www.baidu.com

3. Advanced custom password verification
The previous verifications are all provided by extjs, and we can also customize the verification function.

Copy code The code is as follows:

//First use the Ext.apply method to add custom Password verification function (can also take other names)
Ext.apply(Ext.form.VTypes,{
password:function(val,field){//val refers to the text box value here, field refers to this Text box component, everyone must understand this meaning
if(field.confirmTo){//confirmTo is our custom configuration parameter, generally used to save the id value of other components
var pwd=Ext.get( field.confirmTo);//Get the value of the id of confirmTo
return (val==pwd.getValue());
}
return true;
}
});
//Configure items parameters
items: [{fieldLabel: "Password",
id: "pass1",
},{
fieldLabel: "Confirm Password",
id: "pass2",
vtype: "password", // Customized verification type
vtypeText: "Two passwords are inconsistent!",
confirmTo: "pass1", // The other one to be compared Component's id
}

4. Use regular expressions to verify

Copy code Code As follows:

new Ext.form.TextField({
fieldLabel : "name",
name : "author_nam",
regex : /[u4e00-u9fa5]/, //The regular expression is between /...../. [u4e00-u9fa5]: Only Chinese can be entered.
regexText: "Only Chinese can be entered!", //Regular expression error message
allowBlank : false //This verification is still valid. It cannot be empty.