Copy Code code as follows:
Placed in the Onready function () {}
Ext.QuickTips.init (); Provides a hint information feature for a component, and the main message for the form is the error message for client validation.
Ext.form.field.prototype.msgtarget= ' side '; The method of prompting, the enumeration value is:
qtip-display prompts when the mouse is moved over the control;
The title-is displayed in the browser title, but the test results are the same as Qtip;
under-Displays the error prompt underneath the control;
side-displays an error icon to the right of the control and an error message when the mouse points to the icon. Default value;
Id-[element ID] Error prompt appears in the HTML component of the specified ID
1. One of the simplest examples: null validation
Copy Code code as follows:
Two parameters for null validation
Allowblank:false//false cannot be null, default is True
blanktext:string//error message when empty
The JS code is:
Copy 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,//not allowed to be empty
Blanktext: "Cannot be empty",//error message, defaults to this field is required!
ID: "Blanktest",
}
]
});
2. Use the VType format for simple verification.
In this example mail validation, rewrite the above code's items configuration:
Copy Code code as follows:
items:[
{fieldlabel: "Cannot be empty",
VType: "Email",//email format verification
Vtypetext: "is not a valid mailbox address"//error message, default value I'm not going to say it.
ID: "Blanktest",
Anchor: "90%"
}
You can modify the above vtype for the following several ExtJS VType default supported validation:
Default support type for VType in form validation
1.alpha//Can only enter letters, can not enter other (such as numbers, special symbols, etc.)
2.alphanum//can only enter letters and numbers and cannot enter other
3.email//email authentication, the required format is ""
4.url//url format verification, the required format is http://www.baidu.com
3. Advanced Custom Password Authentication
The previous validation is ExtJS already provided, and we can also customize the validation function.
Copy Code code as follows:
To add a custom password validation function with the Ext.apply method (or you can take 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, we need to understand this meaning
if (field.confirmto) {//confirmto is our custom configuration parameter, typically used to hold the ID value of another component
var pwd=ext.get (FIELD.CONFIRMTO);//The value of the ID that gets the Confirmto
Return (Val==pwd.getvalue ());
}
return true;
}
});
Configure the items parameter
Items:[{fieldlabel: "Password",
ID: "Pass1",
},{
Fieldlabel: "Confirm Password",
ID: "Pass2",
VType: "Password",//Custom Authentication type
Vtypetext: "Two times password inconsistent!" ",
Confirmto: "Pass1",//ID of another component to compare
}
4. Using Regular expression validation
Copy Code code as follows:
New Ext.form.TextField ({
Fieldlabel: "Name",
Name: "Author_nam",
Regex:/[\u4e00-\u9fa5]/,//regular expression between/...../. [\U4E00-\U9FA5]: Only Chinese can be entered.
Regextext: "Only Chinese!",//Regular expression error prompts
Allowblank:false//This validation is still valid. Don't be empty.
