JSFiddle - React, Tailwind, and code Playground

by Nahuel Scotti

HTML

<div id="app">
  <input type="text" v-model="value" v-bind:class="{'valid': validate(value)}">
</div>

CSS

input:focus {
  outline-width: 0;
}

input {
  border: 4px solid red;
  font-size: 2rem;
  color: #777;
  width: 12rem;
}

.valid {
  border: 4px solid green;
}

JavaScript

let validate = (value) => {
  var str = value.toString().replace(/\s/g, "");
  var rExp = /((^[5]{1})[0-2][0-9]{3})|((^[0]{1})[1-9]{1}[0-9]{3})|((^[1-4]{1})[0-9]{1}[0-9]{3})$/;
  return str.length === 5 && rExp.test(str);
};

new Vue({
  el: '#app',
  data: {
    value: ""
  },
  methods: {
    validate: validate
  }
});