Copy the code code as follows:
//Put it in function(){} of onReady
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 - displays a tip when the mouse moves over the control;
title-The title displayed in 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, and displays an error prompt when the mouse points to the icon. Default value;
id-[element id] error message is displayed in the HTML element of the specified id
1. The simplest example: null verification
Copy the code code as follows:
//Two parameters for null verification
allowBlank:false//false cannot be empty, the default is true
blankText:string//Error message when it is empty
js code is:
Copy the code code as follows:
var form1 = new Ext.form.FormPanel({
width:350,
renderTo:"form1",
title:"FormPanel",
defaults:{xtype:"textfield",inputType:"password"},
items:[
{fieldLabel:"cannot be empty",
allowBlank:false, //blank is not allowed
blankText:"cannot be empty", //error message, the default is This field is required!
id:"blanktest",
}
]
});
2. Use vtype format for simple verification.
In this example of email verification, rewrite the items configuration of the above code:
Copy the code code as follows:
items:[
{fieldLabel:"cannot be empty",
vtype:"email",//email format verification
vtypeText: "Not a valid email address", //error message, I won't go into the default value.
id:"blanktest",
anchor:"90%"
}
You can modify the above vtype to the following verifications supported by the following vtypes of extjs by default:
//The default supported type of vtype in form validation
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, no other input is possible
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 the code code as follows:
//First use the Ext.apply method to add a custom password verification function (you can also give it another name)
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 another component
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: "The two passwords are inconsistent!",
confirmTo:"pass1",//The id of another component to be compared
}
4. Use regular expression verification
Copy the 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.