Подскажите как пофиксить код валидации поля input. Условия валидации:
- Заперетить ввод знаков +, -, e
- Запретить вводить количество цифр больше 9
- Граница инпута должна быть красной до тех пор пока не будет введено 9 цифр
- Кнопка Send становится доступной для нажатия, после того как будет введено 9 цифр
Ниже код, который работает на ПК, но на мобильной клавиатуре при вводе 10-ой цифры удаляется послепдняя и заменяется вводимой.
Вставил код из проекта. Но не знаю как правильно его здесь подключить.
export default {
data: () => ({
accessCode: '',
maxLengthAceessCode: 9,
isAccessCodeValid: false
}),
methods: {
checkAccessCode(event) {
try {
if (!Number(event.data.replace(/\D/g, '').substr(0, this.maxLengthAceessCode))) {
this.accessCode = this.accessCode.slice(0, -1)
}
if (this.accessCode.length === this.maxLengthAceessCode) {
this.isAccessCodeValid = !this.isAccessCodeValid
}
} catch (error) {
this.isAccessCodeValid = false
}
},
},
}
input.invalide:focus {
border: 1px solid red;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="d-flex flex-column mt-auto align-self-center">
<div
v-if="isCallInProgress"
class="form-group mb-5"
>
<label for="acces-code">Access code</label>
<div class="input-group input-group-lg">
<input
v-model="accessCode"
class="form-control"
:class="{invalide: !isAccessCodeValid}"
id="acces-code"
type="tel"
maxlength="9"
inputMode="numeric"
pattern="[0-9]*"
autofocus
autocomplete="off"
aria-label="Access code"
aria-describedby="basic-addon"
style="width:135px"
@input="checkAccessCode"
@paste.prevent
>
<div class="input-group-append">
<button
class="btn btn-primary btn-lg"
:class="{disabled: !isAccessCodeValid}"
type="button"
style="border-top-left-radius: 0; border-bottom-left-radius: 0"
>
Send
</button>
</div>
</div>
<small id="codeHelp" class="form-text text-muted">Access сode must include 9 digits</small>
</div>