63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
<template>
|
|
<div class="space-y-2">
|
|
<label for="telephone" class="block text-sm text-gray-900">{{ label }} </label>
|
|
<div class="mt-2 h-10 flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600">
|
|
<img src="@/assets/svg/smartphone.svg" alt="" class="h-5 w-5" />
|
|
<input
|
|
id="telephone"
|
|
v-model="telephone"
|
|
type="tel"
|
|
name="telephone"
|
|
:placeholder="placeholder"
|
|
:required="required"
|
|
class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6"
|
|
/>
|
|
</div>
|
|
<p v-if="error" class="mt-2 text-sm text-error">{{ error }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
label: {
|
|
type: String,
|
|
default: 'Teléfono'
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: 'Introduce tu teléfono'
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
emits: ['input-value'],
|
|
data() {
|
|
return {
|
|
telephone: '',
|
|
error: ''
|
|
}
|
|
},
|
|
watch: {
|
|
telephone(newVal) {
|
|
this.error = '';
|
|
this.updateTelephone(newVal);
|
|
}
|
|
},
|
|
methods: {
|
|
updateTelephone(value) {
|
|
this.error = '';
|
|
//const phonePattern = /^[\s-]*(?:\d[\s-]*){1,14}\d[\s-]*$/;
|
|
const phonePattern = /^\+?[0-9\s\-()]{7,15}$/;
|
|
//////console.log('Valor del teléfono:', phonePattern.test(value));
|
|
if (phonePattern.test(value)) {
|
|
this.$emit('input-value', value);
|
|
} else {
|
|
this.error = "Por favor, introduce un número de teléfono válido.";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |