Validity verification for ExtJs4 table input

 

I can see that there is no similar demo official api on the Internet and it is not clearly written. I wrote a simple example to share it with you. I hope you can help improve it ~

 

I. required configuration
1. Grid is the cell editing mode.

[Javascript]
Var cellEditing = Ext. create ('ext. grid. plugin. CellEditing ',{
Id: "fxxxCellEditing ",
ClicksToEdit: 2 // double-click Edit
});

Var cellEditing = Ext. create ('ext. grid. plugin. CellEditing ',{
Id: "fxxxCellEditing ",
ClicksToEdit: 2 // double-click Edit
});

[Javascript]
SelType: 'cellmodel ',

SelType: 'cellmodel ',
2. QuickTips is used to suspend display of error messages
[Javascript]
Ext. QuickTips. init (); // error suspension prompt

Ext. QuickTips. init (); // error suspension prompt 3. Each columns of the Grid declares an editor

[Javascript]
Columns :[
{
Header: '<font color = "red"> * </font> function ',
DataIndex: 'funname ',
Width: "10% ",
Align: 'center ',
Sortable: true, // sorting
Editor: new Ext. form. TextField ({
AllowBlank: false,
BlankText: "The function cannot be blank ",
MaxLength: 40,
MaxLengthText: "The length cannot exceed 40"

})
},

Columns :[
{
Header: '<font color = "red"> * </font> function ',
DataIndex: 'funname ',
Width: "10% ",
Align: 'center ',
Sortable: true, // sorting
Editor: new Ext. form. TextField ({
AllowBlank: false,
BlankText: "The function cannot be blank ",
MaxLength: 40,
MaxLengthText: "The length cannot exceed 40"

})
},
This editor is implemented using the Ext. form. TextField object,

In this way, the authentication configuration information can be written into the parameter passing.

 

 

 

Ii. Verification Method
1. The system provides length Verification
The length is in English. If it is Chinese, you can use validator to count the length of Chinese characters.

[Javascript]
Editor: new Ext. form. TextField ({
AllowBlank: false,
BlankText: "The function cannot be blank ",
MaxLength: 4,
MaxLengthText: "The length cannot exceed 4"
MinLength: 2,
MinLengthText: "length cannot be less than 2 ",

Editor: new Ext. form. TextField ({
AllowBlank: false,
BlankText: "The function cannot be blank ",
MaxLength: 4,
MaxLengthText: "The length cannot exceed 4"
MinLength: 2,
MinLengthText: "length cannot be less than 2 ",

2. Regular Expression Verification

[Javascript]
Editor: new Ext. form. TextField ({
AllowBlank: false,
BlankText: "The fault mode frequency ratio cannot be blank ",
Regex:/^ (0 ([\.] \ d * [0-9] +) | 0 | 1) $/, // => This regular expression is [0, 1], and another "/0 \. [0-9] * [1-9] $/"Yes (0, 1)
RegexText: "Only input: decimal places in the value range of 0 to 1"
})

Editor: new Ext. form. TextField ({
AllowBlank: false,
BlankText: "The fault mode frequency ratio cannot be blank ",
Regex:/^ (0 ([\.] \ d * [0-9] +) | 0 | 1) $/, // => This regular expression is [0, 1], and another "/0 \. [0-9] * [1-9] $/"Yes (0, 1)
RegexText: "Only input: decimal places in the value range of 0 to 1"
})

3. form. TextField validator: configuration Verification

[Javascript]
Editor: new Ext. form. TextField ({
AllowBlank: false,
BlankText: "The function cannot be blank ",
Validator: function (value)
{
Var len = value. replace (/[^ \ x00-\ xff]/g, "xx"). length;
If (len> 4000)
{
Return 'function length cannot exceed 4000 bytes, one Chinese character is two byte ';
}
Else
{
Return true;
}
}
})

Editor: new Ext. form. TextField ({
AllowBlank: false,
BlankText: "The function cannot be blank ",
Validator: function (value)
{
Var len = value. replace (/[^ \ x00-\ xff]/g, "xx"). length;
If (len> 4000)
{
Return 'function length cannot exceed 4000 bytes, one Chinese character is two byte ';
}
Else
{
Return true;
}
}
})

4. vtype custom Verification
This is relatively complicated. I only use validator to complete the verification. I didn't study it when it was too short.

The general usage is as follows:

[Javascript]
Vtype: "email", // verify the email format
VtypeText: "invalid email address", // error message

Vtype: "email", // verify the email format
VtypeText: "invalid email address", // error message
Officially assigned several vtypes

You can also use

Ext. apply (Ext. form. field. VTypes ,{
Expand by yourself