Validating data on inputs with the pattern attribute 관련

CSS > Snippets

---

Snippets

---

Validating data on inputs with the pattern attribute

<form>
  <input 
    type="text"
    placeholder="Has to contain 4 letters and no numbers"
    pattern="[A-Za-z]{4}"
  />
  <button>Send</button>
</form>

<form>
  <input 
    type="password"
    placeholder="Has to contain 6 letters or more"
    pattern=".{6,}"
  />
  <button>Send</button>
</form>


<form>
  <input 
    type="text"
    placeholder="Can only contain numbers"
    pattern="[0-9]+"
  />
  <button>Send</button>
</form>

<form>
  <input
    type="url"
    placeholder="Must start with https:// or http://"
    pattern="http:?://.+"
  />
  <button>Send</button>
</form>

---