Pode usar o atributo pattern
e required
(ambos HTML5). O required
irá impedir o envio do formulário caso nada seja digitado no campo, e o pattern
irá impedir o envio do formulário se o valor não seguir o padrão da expressão regular especificada.
Pelo que entendi, o formato seria 2 números + 2 números + duas letras minúsculas, separados por hífen. A expressão regular seria:
\d{2}-\d{2}-[a-z]{2}
Ficaria assim:
<form>
<input type="text" pattern="\d{2}-\d{2}-[a-z]{2}" required>
<br>
<button>Enviar</button>
</form>
Embora a regex no pattern
exija que o valor do campo esteja no
formato especificado, o submit aceita o campo vazio, por isso é
necessário o required
também.
Validando com JavaScript
Outra forma é verificar o campo com JavaScript, sem usar os atributos do HTML5. A lógica é basicamente a mesma, basta verificar se o valor do campo atende a expressão regular. Neste caso, é preciso incluir na regex os delimitadores ^
(início da string) e $
(fim da string), caso contrário aceitaria algo como 11-22-aas
ou 111-22-aa
:
document.addEventListener("DOMContentLoaded", function(){
document.forms[0].onsubmit = function(e){
var campo = document.forms[0].registro.value;
if(!/^\d{2}-\d{2}-[a-z]{2}$/.test(campo)){
e.preventDefault(); // aborta o submit
alert("Valor inválido");
}
}
});
<form>
<input type="text" name="registro">
<br>
<button>Enviar</button>
</form>
<input>
possui o atributopattern
que você pode informar uma expressão regular para validar o valor do campo. Quer tentar?