Data validation and regular expression validation for Extjs forms

Data validation and regular expression validation for Extjs forms
Extjs Form Verification includes empty verification, simple verification in vtype format, advanced custom password verification, and regular expression verification. Verify that code can be written using the script provided by js, but ext encapsulates the form and allows the customer to expand it, therefore, the verification provided by Extjs can greatly simplify the verification judgment. Before verification, read the following two statements:

// Put Ext. QuickTips. init () in the function () {} of onReady; // 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
The Code is as follows:

// Empty verification parameters allowBlank: false // false cannot be blank. The default value is true blktext: string // error message when null.

Js Code:
The 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, // do not allow blank text: "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:
The Code is as follows:

Items: [{fieldLabel: "cannot be blank", vtype: "email", // verify vtypeText: "invalid email address", // error message, by default, I will not mention 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.
The 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 here, and field refers to the text box component. You need to understand this meaning 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); // get 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
The Code is as follows:

New Ext. form. textField ({fieldLabel: "name", name: "author_nam", regex:/[\ u4e00-\ u9fa5]/, // Regular Expression in /...... [\ u4e00-\ u9fa5]: only Chinese characters can be entered. regexText: "Chinese only! ", // Regular Expression error prompt allowBlank: false // This verification is still valid. Do not leave it blank.

 }）

My projects:






Some custom verification functions
 
 

  
  
Ext. apply (Ext. form. VTypes,
  
  
{
  
  
Daterange: function (val, field)
  
  
{
  
  
Var date = field. parseDate (val );
  
  
 
  
  
// We need to force the picker to update values to recaluate the disabled dates display
  
  
Var dispUpd = function (picker)
  
  
{
  
  
Var ad = picker. activeDate;
  
  
Picker. activeDate = null;
  
  
Picker. update (ad );
  
  
};
  
  
 
  
  
If (field. startDateField)
  
  
{
  
  
Var sd = Ext. getCmp (field. startDateField );
  
  
Sd. maxValue = date;
  
  
If (sd. menu & sd. menu. picker)
  
  
{
  
  
Sd. menu. picker. maxDate = date;
  
  
DispUpd (sd. menu. picker );
  
  
}
  
  
}
  
  
Else if (field. endDateField)
  
  
{
  
  
Var ed = Ext. getCmp (field. endDateField );
  
  
Ed. minValue = date;
  
  
If (ed. menu & ed. menu. picker)
  
  
{
  
  
Ed. menu. picker. minDate = date;
  
  
DispUpd (ed. menu. picker );
  
  
}
  
  
}
  
  
Return true;
  
  
},
  
  
 
  
  
Password: function (val, field)
  
  
{
  
  
If (field. initialPassField)
  
  
{
  
  
Var pwd = Ext. getCmp (field. initialPassField );
  
  
Return (val = pwd. getValue ());
  
  
}
  
  
Return true;
  
  
},
  
  
PasswordText: 'The passwords entered twice are inconsistent! ',
  
  
 
  
  
Chinese: function (val, field)
  
  
{
  
  
Var reg =/^ [/u4e00-/u9fa5] + $/I;
  
  
If (! Reg. test (val ))
  
  
{
  
  
Return false;
  
  
}
  
  
Return true;
  
  
},
  
  
ChineseText: 'enter Chinese characters ',
  
  
 
  
  
Age: function (val, field)
  
  
{
  
  
Try
  
  
{
  
  
If (parseInt (val)> = 18 & parseInt (val) <= 100)
  
  
Return true;
  
  
Return false;
  
  
}
  
  
Catch (err)
  
  
{
  
  
Return false;
  
  
}
  
  
},
  
  
AgeText: 'Age input incorrect ',
  
  
 
  
  
Alphanum: function (val, field)
  
  
{
  
  
Try
  
  
{
  
  
If (! // W/. test (val ))
  
  
Return true;
  
  
Return false;
  
  
}
  
  
Catch (e)
  
  
{
  
  
Return false;
  
  
}
  
  
},
  
  
AlphanumText: 'enter English letters or numbers. Other characters are not allowed .',
  
  
 
  
  
Url: function (val, field)
  
  
{
  
  
Try
  
  
{
  
  
If (/^ (http | https | ftp): // ([A-Z0-9] [A-Z0-9 _-] *) (/. [A-Z0-9] [A-Z0-9 _-] *) +) (:(/d + ))? //? /I. test (val ))
  
  
Return true;
  
  
Return false;
  
  
}
  
  
Catch (e)
  
  
{
  
  
Return false;
  
  
}
  
  
},
  
  
UrlText: 'enter a valid URL address .',
  
  
 
  
  
Max: function (val, field)
  
  
{
  
  
Try
  
  
{
  
  
If (parseFloat (val) <= parseFloat (field. max ))
  
  
Return true;
  
  
Return false;
  
  
}
  
  
Catch (e)
  
  
{
  
  
Return false;
  
  
}
  
  
},
  
  
MaxText: 'exceeds the maxim ',
  
  
 
  
  
Min: function (val, field)
  
  
{
  
  
Try
  
  
{
  
  
If (parseFloat (val)> = parseFloat (field. min ))
  
  
Return true;
  
  
Return false;
  
  
}
  
  
Catch (e)
  
  
{
  
  
Return false;
  
  
}
  
  
},
  
  
MinText: 'smaller than minimal ',
  
  
 
  
  
Datecn: function (val, field)
  
  
{
  
  
Try
  
  
{
  
  
Var regex =/^ (/d {4})-(/d {2})-(/d {2}) $ /;
  
  
If (! Regex. test (val) return false;
  
  
Var d = new Date (val. replace (regex, '$1/$2/$3 '));
  
  
Return (parseInt (RegExp. $2, 10) = (1 + d. getMonth () & (parseInt (RegExp. $3, 10) = d. getDate () & (parseInt (RegExp. $1, 10) = d. getFullYear ());
  
  
}
  
  
Catch (e)
  
  
{
  
  
Return false;
  
  
}
  
  
},
  
  
DatecnText: 'Use this date format: yyyy-mm-dd. For example: 2008-06-20 .',
  
  
 
  
  
Integer: function (val, field)
  
  
{
  
  
Try
  
  
{
  
  
If (/^ [-+]? [/D] + $/. test (val ))
  
  
Return true;
  
  
Return false;
  
  
}
  
  
Catch (e)
  
  
{
  
  
Return false;
  
  
}
  
  
},
  
  
IntegerText: 'Enter the correct integer ',
  
  
 
  
  
Minlength: function (val, field)
  
  
{
  
  
Try
  
  
{
  
  
If (val. length> = parseInt (field. minlen ))
  
  
Return true;
  
  
Return false
  
  
}
  
  
Catch (e)
  
  
{
  
  
Return false;
  
  
}
  
  
},
  
  
MinlengthText: 'too short ',
  
  
 
  
  
Maxlength: function (val, field)
  
  
{
  
  
Try
  
  
{
  
  
If (val. length <= parseInt (field. maxlen ))
  
  
Return true;
  
  
Return false;
  
  
}
  
  
Catch (e)
  
  
{
  
  
Return false;
  
  
}
  
  
},
  
  
MaxlengthText: 'too long ',
  
  
 
  
  
Ip: function (val, field)
  
  
{
  
  
Try
  
  
{
  
  
If (/^ (? :(? : 25 [0-5] | 2 [0-4] [0-9] | [01]? [0-9] [0-9]?) /.) {3 }(? : 25 [0-5] | 2 [0-4] [0-9] | [01]? [0-9] [0-9]?) $/. Test (val )))
  
  
Return true;
  
  
Return false;
  
  
}
  
  
Catch (e)
  
  
{
  
  
Return false;
  
  
}
  
  
},
  
  
IpText: 'Enter the correct IP address ',
  
  
 
  
  
Phone: function (val, field)
  
  
{
  
  
Try
  
  
{
  
  
If (/^ (0 [1-9] {3 })? (0 [12] [0-9])? [-])? /D {6, 8} $/. test (val ))
  
  
Return true;
  
  
Return false;
  
  
}
  
  
Catch (e)
  
  
{
  
  
Return false;
  
  
}
  
  
},
  
  
PhoneText: 'Enter the correct phone number, for example, 0920-29392929 ',
  
  
 
  
  
Mobilephone: function (val, field)
  
  
{
  
  
Try
  
  
{
  
  
If (/(^ 0? [1] [35] [0-9] {9} $)/. test (val ))
  
  
Return true;
  
  
Return false;
  
  
}
  
  
Catch (e)
  
  
{
  
  
Return false;
  
  
}
  
  
},
  
  
MobilephoneText: 'Enter the correct mobile phone number ',
  
  
 
  
  
Alpha: function (val, field)
  
  
{
  
  
Try
  
  
{
  
  
If (/^ [a-zA-Z] + $/. test (val ))
  
  
Return true;
  
  
Return false;
  
  
}
  
  
Catch (e)
  
  
{
  
  
Return false;
  
  
}
  
  
},
  
  
AlphaText: 'Enter the English letter'
  
  
});