Extjs form validate form verification experience

Source: Internet
Author: User

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"] = /./;
#####################

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.