52 lines
1.7 KiB
Vue
52 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
const isModalOpen = useState('modal_open', () => false)
|
|
const toggleModal = () => {
|
|
modal_phone.value = ''
|
|
isModalOpen.value = !isModalOpen.value
|
|
}
|
|
const modal_phone = ref()
|
|
const model_form = reactive({
|
|
disabled: true,
|
|
errors: [],
|
|
})
|
|
|
|
const validateInput = (evt: KeyboardEvent) => {
|
|
const valid_symbols = /[a-zA-Z0-9\+(\\)\ @\.]/
|
|
if (!valid_symbols.test(evt.key)) {
|
|
evt.preventDefault()
|
|
return
|
|
}
|
|
}
|
|
const validate = () => {
|
|
const phone_regexp = /\(?\+[0-9]{1,3}\)? ?-?[0-9]{1,3} ?-?[0-9]{3,5} ?-?[0-9]{4}( ?-?[0-9]{3})? ?(\w{1,10}\s?\d{1,6})?/
|
|
const email_regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/
|
|
|
|
if (modal_phone.value.length < 3) {
|
|
model_form.disabled = true
|
|
return
|
|
}
|
|
if (phone_regexp.test(modal_phone.value) || email_regex.test(modal_phone.value)) {
|
|
model_form.disabled = false
|
|
return
|
|
}
|
|
}
|
|
const submit = (e: any) => {
|
|
console.log(e)
|
|
modal_phone.value = ''
|
|
isModalOpen.value = false
|
|
}
|
|
</script>
|
|
<template>
|
|
<div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
|
|
<div class="modal">
|
|
<h2>Оставьте номер телефона для связи</h2>
|
|
<form @submit.prevent="submit">
|
|
<input type="phone" v-model="modal_phone" @keypress="validateInput" @keyup="validate" />
|
|
<div class="flex gap-4">
|
|
<button class="not-prose" :disabled="model_form.disabled" type="submit">Отправить</button>
|
|
<button class="not-prose" type="reset" @click="toggleModal">Отмена</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template> |