正则表达式在仅应显示10位数字的情况下将电话号码显示为有效的9位和10位数字

我正在使用它来验证电话号码.....它应该是10位数字，并且一旦它是10位数字，就去掉红色的波浪线，并以这种模式将其格式化为（xxx）xxx-xxxx。但是，根据此验证，当我写完9位数字时，它会将该数字显示为有效数字，并删除红色的波浪线，然后当我写出第10位数字时，它将按照上述模式进行格式化。

// custom Vtype for vtype:'phone'
// Vtype for phone number validation
Ext.apply(Ext.form.VTypes, { 
    'phoneText': i18n.validation.phonetext, 
    'phoneMask': /[\-\+0-9\(\)\s\.Ext]/, 
    'phoneRe': /^(\({1}[0-9]{3}\){1}\s{1})([0-9]{3}[-]{1}[0-9]{4})$|^(((\+44)? ?(\(0\))? ?)|(0))( ?[0-9]{3,4}){3}$|^Ext. [0-9]+$/, 
    'phone': function (v) {
        return this.phoneRe.test(v); 
    }
});

// Function to format a phone number
Ext.apply(Ext.util.Format, {
    phoneNumber: function(value) {
        var phoneNumber = value.replace(/\./g, '').replace(/-/g, '').replace(/[^0-9]/g, '');

        if (phoneNumber != '' && phoneNumber.length == 10) {
            return '(' + phoneNumber.substr(0, 3) + ') ' + phoneNumber.substr(3, 3) + '-' + phoneNumber.substr(6, 4);
        } else {
            return value;
        }
    }
});

Ext.namespace('Ext.ux.plugin');

// Plugin to format a phone number on value change
Ext.ux.plugin.FormatPhoneNumber = Ext.extend(Ext.form.TextField, {
    init: function(c) {
        debugger;
        c.on('change', this.onChange, this);
    },
    onChange: function(c) {
        debugger;
        c.setValue(Ext.util.Format.phoneNumber(c.getValue()));
    }});



          this.phone = {
                xtype: 'textfield',
                country: Bedbath.registry.params.country,
                labelSeparator: "",
                fieldLabel: i18n.label.phone+": <span style='color:red'>*</span>",
                name: "phone1RE",
                ref: 'phone1RE',
                id: 'phone1RE',
                allowBlank: false,
                vtype:'phone',
                plugins: new Ext.ux.plugin.FormatPhoneNumber()
            };

我不知道它如何显示它对9位数字有效？有人可以帮我吗？谢谢你。