Как можно такое реализовать с помощью masked input?
3 ответа
Если используете плагин maskedinput, то можно его настроить так:
//задаете x как любое число
$.mask.definitions['x']='[0-9]';
//устанавливаете саму маску и * вместо подчеркивания
$("id").mask("4276-xxxx-xx98-7654", {placeholder: '*'});
Если я правильно понял, маска должна показать ошибку только при неверной следующей цифре.
Нам придется создать длиннющее выражение:
- где текущий символ должен совпадать
- а последующего может пока не быть
Это позитивный просмотр вперед ^(?=(1(?=(2$)|$))|$)
:
^
- начало строки(?=
- за которой может быть что-то|$
- или может ничего не быть
const mask = '4276-xxxx-xx98-7654'
function createRegExp(mask) {
// Собирать будем с последнего символа.
const array = Array.from(mask).reverse()
// Окружаем началом и концом
const result = (src) => `^(?=(${src})|$)`
// Замена
const char = (v) => /\d|-/.test(v) ? `${v}` : `\\d`
// Последний символ устанавливается несколько иначе - после него всегда конец строки
const end = `${char(array.shift())}$`
// На случай только одного символа
if (!array.length) {
return result(end)
}
return result(array.reduce((a, v) => {
return `${char(v)}(?=(${a})|$)`
}, end))
}
const src = createRegExp(mask)
// Для просмотра
console.log(src)
const regExp = new RegExp(src)
document.querySelector('input').addEventListener('input', function () {
const value = this.value.trim()
if (regExp.test(value)) {
this.style.color = '#000'
} else {
this.style.color = 'red'
}
})
<div>4276-xxxx-xx98-7654</div>
<input type="text">
Осталось встроить проверку кол-ва символов, по которой можно активировать необходимую кнопку с сообщением - "Все верно :)"
UPD
А я видимо вопроса не понял, там звездочки надо.
Ну ладно, оставлю, может кому и это пригодится.
Отображение "звездочек" можно сделать используя регулярные выражения, например так:
const str = '1234-5678-9012-3456'
const strRepl = str.slice(5,12).replace(/\d/g, 'x')
const strNew = str.slice(0, 5) + strRepl + str.slice(12)
console.log(strNew)
Или, например, совсем в лоб:
const str = '1234-5678-9012-3456'
const strNew = str.slice(0, 5) + 'xxxx-xx' + str.slice(12)
console.log(strNew)
Проверку можно также сделать при помощи регулярных выражений
const str = '1234-5678-9012-3456'
const regex = /^1|^8|^9|^0/
if (regex.test(str)) {
console.log('Error')
} else {
console.log('Ok')
}
-
-
Вам необходимо "на лету" это делать? Если так то это называется контролируемый ввод и, например, в реакте реализуется так habr.com/ru/post/502034 Или через хук useState. 5 апр 2021 в 14:26
-
-
Ну как вариант вам предложили через плагин maskedinput. Если там нет встроенной проверки, то можно взять исходники этого плагина и добавить эту проверку. 5 апр 2021 в 16:26
-