在 extjs 中扩展电子邮件验证

Question

I am having the below user registration form built in 6.0.1.250 version of ExtJs. I have an email field which accepts .co , .com till the four characters. I need to handle the recent tlds and want to override the email validation logic. I tried with the validator and applying the regex but the regexText is not supporting internationalisation. How to extend the email validation. I am using 6.0 version of extjs framework. Below is the code snippet for UserForm

Ext.define('myApp.view.users.NewUserForm', {
extend: 'Ext.panel.Panel',
xtype: 'newuser',
title: '<span class="red-label">*</span>'+ l10n('new-user'),
items: [{
    xtype: 'textfield',
    fieldLabel: '<span class="red-label">*</span>' + l10n('name'),
    name: 'username',
    maxLength: 80,
    allowBlank: false
}, {
    xtype: 'textfield',
    inputType: 'password',
    fieldLabel: '<span class="red-label">*</span>' + l10n('password'),
    name: 'password1',
    vtype: 'password',
    initialPassField: 'password2',
    allowBlank: false,
    maskRe: /[^ ]/
}, {
    xtype: 'textfield',
    fieldLabel: '<span class="red-label">*</span>' + l10n('confirm-password'),
    vtype: 'password',
    inputType: 'password',
    name: 'password2',
    initialPassField: 'password1',
    allowBlank: false,
    maskRe: /[^ ]/
}, {
    xtype: 'textfield',
    fieldLabel: '<span class="red-label">*</span>' + l10n('e-mail-address'),
    name: 'emailAddress',
    vtype:'email',
    allowBlank: false
}, {
    xtype: 'textarea',
    fieldLabel: l10n('description'),
    name: 'userDescription'
  }]
});

Answer 1

You could override the email validation vtype like so:

Ext.define(null, {
    override: 'Ext.form.field.VTypes',
    email: function (value) {
        return /^(")?(?:[^\."\s])(?:(?:[\.])?(?:[\w\-!#$%&'*+/=?^_`{|}~]))*\1@(\w[\-\w]*\.){1,5}([A-Za-z]){2,10}$/.test(value);
    }
});

I took the default email regex and changed so that it allows from 2 to 10 characters for the domain name.

Edit

If you use Sencha CMD, there is a special overrides folder where you should put your overrides. So you can create a file called Vtypes.js , place the code there, and after a sencha app refresh you will be fine. If you don't - the override should be basically executed before you use the actual vtype. You might have a method called applyOverrides in your Application.js , and then call it first thing from your launch method.

Answer 2

We can solve above using this simple approach:

{
   xtype: 'textfield',
   fieldLabel: '<span class="red-label">*</span>' + l10n('e-mail-address'),
   name: 'emailAddress',
   regex : /^(")?(?:[^\."])(?:(?:[\.])?(?:[\w\-!#$%&'*+\/=?\^_`{|}~]))*\1@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/,
   allowBlank: false
}