0

введите сюда описание изображения

Как можно такое реализовать с помощью masked input?

3

3 ответа 3

3

Если используете плагин maskedinput, то можно его настроить так:

    //задаете x как любое число 
    $.mask.definitions['x']='[0-9]';

    //устанавливаете саму маску и * вместо подчеркивания
    $("id").mask("4276-xxxx-xx98-7654", {placeholder: '*'}); 
2

Если я правильно понял, маска должна показать ошибку только при неверной следующей цифре.

Нам придется создать длиннющее выражение:

  • где текущий символ должен совпадать
  • а последующего может пока не быть

Это позитивный просмотр вперед ^(?=(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
А я видимо вопроса не понял, там звездочки надо. Ну ладно, оставлю, может кому и это пригодится.

0

Отображение "звездочек" можно сделать используя регулярные выражения, например так:

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')
}

5
  • А как это при вводе делать? 5 апр 2021 в 14:08
  • Вам необходимо "на лету" это делать? Если так то это называется контролируемый ввод и, например, в реакте реализуется так habr.com/ru/post/502034 Или через хук useState. 5 апр 2021 в 14:26
  • А чистым js или плагинами никак не получится? 5 апр 2021 в 15:22
  • Ну как вариант вам предложили через плагин maskedinput. Если там нет встроенной проверки, то можно взять исходники этого плагина и добавить эту проверку. 5 апр 2021 в 16:26
  • Спасибо!!!!!!!!!! 5 апр 2021 в 16:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.