Copy codeThe Code is as follows:
// 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 of the browser is displayed, 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
Copy codeThe Code is as follows:
// Empty verification parameters
AllowBlank: false // false cannot be blank. The default value is true.
BlankText: string // error message when it is null
Js Code:
Copy codeThe 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 value is This field is required!
Id: "blanktest ",
}
]
});
2. Simple verification in vtype format.
In this example of email verification, rewrite the items configuration of the code above:
Copy codeThe Code is as follows:
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 // verification. The required format is ""
4. url // url format verification, required format is http://www.baidu.com
3. Advanced User-Defined password verification
The previous verification is provided by extjs, and we can also customize the verification function.
Copy codeThe Code is as follows:
// 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
Copy codeThe Code is as follows:
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! ", // Regular Expression error message
AllowBlank: false // This verification is still valid. Do not leave it blank.