空境界

<form-string
    :label="_('w_License_License_Key')"
    v-model="inputLicenseData.licenseKey"
    :placeholder="_('w_License_License_KeyPlaceholder')"
    :maxlength="29"
></form-string>

// ts寫法
// 限輸入英文、數字，格式：xxxxx-xxxxx-xxxxx-xxxxx-xxxxx
@Watch("inputLicenseData.licenseKey")
valueChange(value) {
    this.$nextTick(() => {
        this.inputLicenseData.licenseKey = value 
        .replace(/\s/g, "") .replace(/[^0-9a-zA-Z]/g, "") 
        .replace(/([0-9a-zA-Z]{5})(?=[0-9a-zA-Z])/g, "$&-");
    });
}

// js寫法
// 限輸入英文、數字，格式：xxxxx-xxxxx-xxxxx-xxxxx-xxxxx
    watch: {
        ['inputLicenseData.licenseKey'](val) {
        this.$nextTick(() => {
        this.inputLicenseData.licenseKey = value 
        .replace(/\s/g, "") .replace(/[^0-9a-zA-Z]/g, "") 
        .replace(/([0-9a-zA-Z]{5})(?=[0-9a-zA-Z])/g, "$&-");
    });
}
}

<form-string
    :label="_('w_License_License_Key')"
    v-model="inputLicenseData.licenseKey"
    :placeholder="_('w_License_License_KeyPlaceholder')"
    :maxlength="19"
></form-string>

// ts寫法
// 信用卡數字，格式：xxxx xxxx xxxx xxxx 
@Watch('inputLicenseData.applyLicense')
valueChange(val) {
    this.$nextTick(() => {
        this.inputLicenseData.applyLicense = val
        .replace(/\s/g, '').replace(/\D/g,'')
        .replace(/....(?!$)/g,'$& '); });

        this.inputLicenseData.applyLicense = val
        .replace(/\s/g, '').replace(/[^0-9]/g, '')
        .replace(/([^0-9]]{4})(?=[^0-9]])/g, '$& ')
    });
}

// js寫法 
// 信用卡數字，格式：xxxx xxxx xxxx xxxx 
    watch: {
        ['inputLicenseData.applyLicense'](val) {
        this.$nextTick(() => {
         this.inputLicenseData.applyLicense = val
         .replace(/\s/g, '').replace(/\D/g,'')
         .replace(/....(?!$)/g,'$& '); }); 

         this.inputLicenseData.applyLicense = val
         .replace(/\s/g, '').replace(/[^0-9]/g, '')
         .replace(/([^0-9]]{4})(?=[^0-9]])/g, '$& ') });
}
}