Как правильно прописать валидацию для инпутов при помощи регулярных выражений?

Question

Вопрос такой, нужно для инпута сделать валидацию для ввода hex-кодов.Включают в себя символ ‘#’ и 3 или 6 цифр или a-f букв любого регистра. Подскажите как это правильно сделать.

onChangeInput = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    })

    if(e.target.value.match(/[0-9]{3,6}/)) {
        console.log('1')
    }
}

Начал делать как-то так, но по-моему метод match здесь не совсем подходит

Answer 1

Можно сделать проверку через .test и кормить туда строку которая будет в инпуте (при каждом изменении инпута. Типа как-то так:

const regex = new RegExp('^#([0-9a-f]{3}){1,2}$');

if (regex.test('#f0f1f2')) {
  console.log('done')
} else {
  console.log('not :(')
}

Answer 2

Попробуйте следующий подход:

function App() {
  const [hexCode, setVal] = React.useState('')
  function setHexVal({ target: { value } }) {
    setVal(value.replace(/[^#\da-f]/ig,'').replace(/^([\da-f]*)(#)|#/ig, '$2$1').replace(/^(#[\da-f]{0,6}).*$/i,'$1'))
  }
  return  <div><form><br/>
      Text: <input type='text' onChange={setHexVal} value={hexCode} pattern="#(?:[0-9a-fA-F]{3}){1,2}" /><input type="Submit"/></form>
  </div>
}

ReactDOM.render(<App/>, document.querySelector('#root'))

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

После символа # можно вводить четыре и пять цифр и шестнадцатеричных букв, так как иначе невозможно набрать 6 таких символов, поэтому используется pattern="#(?:[0-9a-fA-F]{3}){1,2}", чтобы проверить правильность ввода при отправке формы.

БЛОГ НА HUSL

Как правильно прописать валидацию для инпутов при помощи регулярных выражений?

Ответы (2 шт):