Vue JS-反应式电话号码格式

Question

我有一个输入了电话号码的表单，我希望在用户主动输入号码时，号码格式更改为相关的电话号码格式。有人能指导我如何在JS和vue 3中实现这一点吗？

预约表格.vue-这是我的主要组件

<div class="form-control">
<label class="form-input" for="telNumber">Telefoonnummer (optioneel)</label>
<input v-model="telNumber" 
:class="{ 'input-error': numberError }"
@input="numberFormatting"
id="telNumber"
type="tel"
placeholder="Vul uw telefoonnummer in"
class="field-input">
<div v-if="numberError" class="validation-error">
<span class="error-message">Voer een bestaand nummer in</span>
</div>
</div>

在我的脚本中，我运行了一个基本的验证函数来验证数字，但它可能与这个场景并不相关。

setup(props) {
const telNumber = ref("");
const numberError = ref(false);
// Run validate form to check whether the data is added
function validateForm() {
if (telNumber.value !== '') {
const numbers = /^[0-9]+$/;
if(!telNumber.value.match(numbers)) {
numberError.value = true;
} else {
numberError.value = false;
}
} else {
numberError.value = false;
}
if (numberError.value) {
AnalyticsHandler.userSendForm(true);
} else if (!numberError.value) {    
sendEmail();
} 
}

Answer 1

您可以使用名为maska 的兼容vue3的第三方库

我自己也尝试过实现这样的东西，但出于时间和功能的考虑，我发现使用这个库更容易。

如果你想制作自己的解决方案，技巧是在输入/更改时用正则表达式匹配/替换解析的值替换值。(它在香草js中，但很容易为vue3更新(

function formatPhone(str) {
return str
.replace(/D/g, '')
.replace(/^(d{1})(d{3})(d{3})(d{4})/g, "$1 ($2) $3 $4")
.replace(/^(d{1})(d{3})(d{3})(d*)/g, "$1 ($2) $3 $4")
.replace(/^(d{1})(d{3})(d{1,3})/g, "$1 ($2) $3")
.replace(/^(d{1})(d{1,3})/g, "$1 ($2")
.substring(0, 16)
.trim();
}
document.querySelector("#phone").addEventListener("input",
function onUpdate(e) {
var pos = e.target.selectionStart - e.target.value.length;
var formatted = formatPhone(e.target.value);
if(formatted.length > 0 && formatted.length < 16) {e.target.classList.add('err')}
else {e.target.classList.remove('err')}
e.target.value = formatted;
e.target.selectionStart = pos+ e.target.value.length;
e.target.selectionEnd = pos+ e.target.value.length;
}
)

input{
min-width: 260px;
display:block;
border-radius:4px;
border: 2px solid #3366FF;
padding: 8px 6px;
margin: 0 0.2rem 0.8rem 0;
box-sizing: border-box;
}
input.err {
border-color: red;
}

<input id="phone" placeholder="#(###) ### ####">

更新(vue版本(

const formatPhone = (str) => str
.replace(/D/g, '')
.replace(/^(d{1})(d{3})(d{3})(d{4})/g, "$1 ($2) $3 $4")
.replace(/^(d{1})(d{3})(d{3})(d*)/g, "$1 ($2) $3 $4")
.replace(/^(d{1})(d{3})(d{1,3})/g, "$1 ($2) $3")
.replace(/^(d{1})(d{1,3})/g, "$1 ($2")
.substring(0, 16)
.trim();
Vue.createApp({
data() {
const numberFormatting = (e)=>telNumber.value = formatPhone(e.target.value);
const telNumber = Vue.ref('');
const numberError = Vue.computed(()=>telNumber.value.length > 0 && telNumber.value.length < 16)
return {telNumber, numberError, numberFormatting}
},
}).mount('#app')

.field-input{display:block; border: 2px solid #CCC; padding:0.4em;border-radius:0.4em}.input-error{border-color:tomato} .error-message{color:tomato}

<script src="https://unpkg.com/vue@3.0.7/dist/vue.global.prod.js"></script>
<div id="app">
<div class="form-control">
<label class="form-input" for="telNumber">Telefoonnummer (optioneel)</label>
<input v-model="telNumber" 
:class="{ 'input-error': numberError }"
@input="numberFormatting"
id="telNumber"
type="tel"
placeholder="Vul uw telefoonnummer in"
class="field-input">
<div v-if="numberError" class="validation-error">
<span class="error-message">Voer een bestaand nummer in</span>
</div>
</div>
</div>

Answer 2

我使用maska通过在字段值上放置一个观察程序来解决它：

<script setup>
import { watch } from 'vue';
import { mask } from 'maska';
watch(() => details.value.phone_number, () => {
details.value.phone_number = mask(details.value.phone_number, '###-###-####');
});
</script>

只需正常使用您的输入并添加观察者。