Extjs Form Verification
// Put it in function () {} of onready
Ext. quicktips. INIT (); // provides the prompt information function for the component. The main prompt information of form is the error message verified by the client.
Ext. Form. Field. Prototype. msgtarget = 'day'; // method of prompting. The enumerated value is
QTip-a prompt is displayed when you move the cursor over the control.
Title-the title is displayed in the browser, but the test result is the same as that of QTip.
Under-an error message is displayed under the control.
Side-an error icon is displayed on the right of the control. An error prompt is displayed when you point to the icon. Default Value.
ID-[element id] the error message is displayed in the HTML element of the specified ID.
1. A simplest example: Empty Verification
// Empty verification parameters
1. allowblank: false // false cannot be blank. The default value is true.
2. blanktext: String // error message when it is null
JSCode Is:
VaR form1 = new Ext. Form. formpanel ({
Width: 350,
Renderto: "form1 ",
Title: "formpanel ",
Defaults: {xtype: "textfield", inputtype: "password "},
Items :[{
ID: "blanktest ",
Fieldlabel: "cannot be blank ",
Allowblank: false, // null is not allowed
Blanktext: "cannot be blank" // error message. The default value is this field is required!
}]
});
2. Simple verification in vtype format.
In this example of email verification, rewrite the items configuration of the code above:
Items :[{
Fieldlabel: "cannot be blank ",
Vtype: "email", // verify the email format
Vtypetext: "invalid email address", // error message. I will leave it blank by default.
ID: "blanktest ",
Anchor: "90%"
}
You can modify the above vtype to the following extjs vtypes that support verification by default:
// The default supported vtype in Form Verification
1. Alpha // only letters can be entered, and other characters (such as numbers and special symbols) cannot be entered)
2. alphanum // only letters and numbers can be entered.
3. Email // email verification, the required format is "langsin@gmail.com"
4. url // URL format verification. The required format is http ://***
3. Advanced User-Defined password verification
The previous verification is provided by extjs, and we can also customize the verification function.
// Use the Ext. Apply method to add a custom password verification function (you can also use another name)
Ext. Apply (ext. Form. vtypes ,{
Password: function (Val, field) {// Val refers to the value of the text box. Field refers to the text box component.
If (field. confirmto) {// confirmto is our custom configuration parameter. It is generally used to save the id value of another component.
VaR Pwd = ext. Get (field. confirmto); // gets 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", // custom authentication type
Vtypetext: "The two passwords are inconsistent! ",
Confirmto: "pass1", // ID of another component to be compared
}
]
4. Regular Expression Verification
New Ext. Form. textfield ({
Fieldlabel: "name ",
Name: "author_nam ",
RegEx:/[/u4e00-/u9fa5]/, // The regular expression is in the range of [/u4e00-/u9fa5.
Regextext: "Chinese only! ",
Allowblank: false // This verification is still valid. Do not leave it blank.
#####################
List of common extjs vtypes
Ext. Form. vtypes ["hostnameval1"] =/^ [A-Za-Z] [-. a-zA-Z0-9] {0,254} $ /;
Ext. form. vtypes ["hostnameval"] =/^ [A-Za-Z] ([-a-zA-Z0-9] {} [a-zA-Z0-9]) {} ([.] [A-Za-Z] ([-a-zA-Z0-9] {} [a-zA-Z0-9]) {}) {0,} $ /;
Ext. form. vtypes ["Marshal"] =/^ ([1-9] [0-9] {0, 1} | 1 [013-9] [0-9] | 12 [0- 689] | 2 [01] [0-9] | 22 [0-3]) ([.] ([1-9] {0, 1} [0-9] | 1 [0-9] {2} | 2 [0-4] [0-9] | 25 [0 -5]) {2} [.] ([1-9] [0-9] {0, 1} | 1 [0-9] {2} | 2 [0-4] [0-9] | 25 [0 -4]) $ /;
Ext. form. vtypes ["netmaskval"] =/^ (128 | 192 | 224 | 24 [08] | 25 [245]. 0.0.0) | (255. (0 | 128 | 192 | 224 | 24 [08] | 25 [245]). 0.0) | (255.255. (0 | 128 | 192 | 224 | 24 [08] | 25 [245]). 0) | (255.255.255. (0 | 128 | 192 | 224 | 24 [08] | 252) $ /;
Ext. form. vtypes ["portval"] =/^ (0 | [1-9] [0-9] {0, 3} | [1-5] [0-9] {4} | 6 [0-4] [0-9] {3} | 65 [0-4] [0-9] {2} | 655 [0-2] [0-9] | 6553 [0-5]) $ /;
Ext. form. vtypes ["multicastval"] =/^ (22 [5-9] | 23 [0-9]) ([.] (0 | [1-9] [0-9] {0, 1} | 1 [0-9] {2} | 2 [0-4] [0-9] | 25 [0-5]) ({3}) | (224 [.] ([1-9] [0-9] {0, 1} | 1 [0-9] {2} | 2 [0-4] [0-9] | 25 [0 -5]) ([.] (0 | [1-9] [0-9] {0, 1} | 1 [0-9] {2} | 2 [0-4] [0-9] | 25 [0-5]) {2}) | (224 [.] 0 [.] ([1-9] [0-9] {0, 1} | 1 [0-9] {2} | 2 [0-4] [0-9] | 25 [0 -5]) ([.] (0 | [1-9] [0-9] {0, 1} | 1 [0-9] {2} | 2 [0-4] [0-9] | 25 [0-5]) $ /;
Ext. Form. vtypes ["usernameval"] =/^ [A-Za-Z] [-_. a-zA-Z0-9] {} $ /;
Ext. Form. vtypes ["passwordval1"] =/^. {6, 31} $ /;
Ext. Form. vtypes ["passwordval"] =/[^ A-Za-Z]. * [^ A-Za-Z]/;
Ext. Form. vtypes ["hostname"] = function (v ){
If (! Ext. Form. vtypes ["hostnameval1"]. Test (V )){
Ext. Form. vtypes ["hostnametext"] = "must begin with a letter and not exceed 255 characters"
Return false;
}
Ext. form. vtypes ["hostnametext"] = "L [. l] [. l] [. l] [...] where l begins with a letter, ends with a letter or number, and does not exceed 63 characters ";
Return Ext. Form. vtypes ["hostnameval"]. Test (v );
}
Ext. Form. vtypes ["hostnametext"] = "invalid hostname"
Ext. Form. vtypes ["hostnamemask"] =/[-. a-zA-Z0-9]/;
Ext. Form. vtypes ["ip"] = function (v ){
Return Ext. Form. vtypes ["Marshal"]. Test (V); extjs Method for uploading fileupload files
}
Ext. Form. vtypes ["iptext"] = "1.0.0.1-223.20.254 excluding 127. x"
Ext. Form. vtypes ["ipmask"] =/[. 0-9]/;
Ext. Form. vtypes ["netmask"] = function (v ){
Return Ext. Form. vtypes ["netmaskval"]. Test (v );
}
Ext. Form. vtypes ["netmasktext"] = "128.0.0.0-255.255.255.252"
Ext. Form. vtypes ["netmaskmask"] =/[. 0-9]/;
Ext. Form. vtypes ["Port"] = function (v ){
Return Ext. Form. vtypes ["portval"]. Test (v );
}
Ext. Form. vtypes ["porttext"] = "0-65535"
Ext. Form. vtypes ["portmask"] =/[0-9]/;
Ext. Form. vtypes ["Multicast"] = function (v ){
Return Ext. Form. vtypes ["multicastval"]. Test (v );
} Simulate the working principle of Tomcat
Ext. Form. vtypes ["multicasttext"] = "224.0.1.0-239.00000000255"
Ext. Form. vtypes ["multicastmask"] =/[. 0-9]/;
Ext. Form. vtypes ["username"] = function (v ){
Return Ext. Form. vtypes ["usernameval"]. Test (v );
}
Ext. Form. vtypes ["usernametext"] = "username must begin with a letter and cannot exceed 255 characters"
Ext. Form. vtypes ["usernamemask"] =/[-_. a-zA-Z0-9]/;
Ext. Form. vtypes ["password"] = function (v ){
If (! Ext. Form. vtypes ["passwordval1"]. Test (V )){
Ext. Form. vtypes ["passwordtext"] = "password length must be 6 to 31 characters long ";
Return false;
}
Ext. Form. vtypes ["passwordtext"] = "password must include atleast 2 numbers or symbols ";
Return Ext. Form. vtypes ["passwordval"]. Test (v );
}
Ext. Form. vtypes ["passwordtext"] = "invalid password"
Ext. Form. vtypes ["passwordmask"] = /./;
#####################