Dever

DEVER DE CASA
Valide o email do formulário usando o onchange.
////////códigos usados em aula

//// tema.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Tratamento de formulários</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
</head>
<body>
<form class="form-horizontal">
<fieldset>


<legend>Venda de veículos</legend>


<div class="form-group">
<label class="col-md-4 control-label" for="modelotxt">Modelo</label>
<div class="col-md-5">
<input id="modelotxt" name="modelotxt" type="text" placeholder="" class="form-
control input-md" required="" onchange="validamodelo();">
</div>
<div class="col-md-5"><span id="tratamodelo"></span></div>
</div>


<label class="col-md-4 control-label" for="fabricanteselect">Fabricantes</label>
<select id="fabricanteselect" name="fabricanteselect" class="form-control"
onchange="validafabricante();">
<option value="0" selected="">-SELECIONE-</option>
<option value="FIAT">FIAT</option>
<option value="GM">GM/CHEVROLET</option>
<option value="VOLKSWAGEN">VOLKSWAGEN</option>
<option value="FORD">FORD</option>
</select>
</div>
<div class="col-md-5"><span id="tratafabricante"></span></div>
</div>


<label class="col-md-4 control-label" for="datatxt">Ano Fabricação</label>
<input id="datatxt" name="datatxt" type="number" placeholder="" class="form-
control input-md" onchange="validaano();">
</div>
<br/>
<div class="col-md-5"><span id="trataano"></span></div>
</div>


<label class="col-md-4 control-label" for="emailtxt">E-mail Comprador</label>
<input id="emailtxt" name="emailtxt" type="e-mail" placeholder="user@server.com"
class="form-control input-md" required=""
onchange="validaemail();">
</div>
<div class="col-md-5"><span id="trataemail"></span></div>
</div>

<div class="form-group" id="cordiv">
<label class="col-md-4 control-label" for="corselect">Cor do Veículo</label>
<input id="corselect" name="corselect" type="color" class="form-control input-sm"
required value="#000000" onchange="trocacor();">
</div>
</div>

<label class="col-md-4 control-label" for="valorrange">Valor de Lucro</label>
<b>5.000 <input id="valorrange" name="valorrange" type="range" class=" input-sm"
min="5000" max="25000" onchange="exibelucro();"> 25.000</b>
</div>
Valor do Lucro: R$ <span id="


<div class="form-group">lucrovalor"></span>
</div>
</div>
<label class="col-md-4 control-label" for=""></label>
<button id="" name="" class="btn btn-success">CADASTRAR</button>
</div>
</div>
</fieldset>
</form>
</body>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
<script type="text/javascript">
document.getElementById('cordiv').style =
"background-color: "+ document.getElementById("corselect").value+";";
function trocacor(){
document.getElementById('cordiv').style =
"background-color: "+ document.getElementById("corselect").value+";";
}
document.getElementById('lucrovalor').innerHTML =
parseFloat(document.getElementById('valorrange').value).toFixed(2);
function exibelucro(){
document.getElementById('lucrovalor').innerHTML =
parseFloat(document.getElementById('valorrange').value).toFixed(2);
}
function validaano(){
let ano = document.getElementById("datatxt");
if(ano.value < 2000 || ano.value > 2020){

ano.value = "";
window.alert("Ano inválido");
document.getElementById("trataano").innerHTML = "de 2000 à 2020";
document.getElementById("trataano").style = "color:red;";
ano.focus();
}
}
function validamodelo(){
let modelo = document.getElementById("modelotxt").value;
if(modelo.length < 2){

document.getElementById("tratamodelo").innerHTML =
"Modelo é obrigatório.";
document.getElementById("tratamodelo").style =
"color: red;";
}
}
function validafabricante(){
if(document.getElementById("fabricanteselect").value === "0"){
document.getElementById("tratafabricante").innerHTML =
"Fabricante é obrigatório.";
document.getElementById("tratafabricante").style =
"color: red;";
} else {
document.getElementById("tratafabricante").innerHTML =
"";
}
}
function validaemail(){
/*alert("oi");
var email = document.getElementById("emailtxt").value;
var exclude=/[^@-.w]|^[_@.-]|[._-]{2}|[@.]{2}|(@)[^@]*1/;
var check=/@[w-]+./;
var checkend=/.[a-zA-Z]{2,3}$/;
if(((email.search(exclude) != -1)||(email.search(check)) == -1)||

(email.search(checkend) == -1)){
/*document.getElementById("trataemail").innerHTML =
"Fabricante é obrigatório.";
document.getElementById("trataemail").style =
"color: red;";
}else{
//document.getElementById("trataemail").innerHTML ="";
}*/
}
</script>
</html>

Dever

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dever

Uploaded by

Copyright:

Available Formats

DEVER DE CASA

Valide o email do formulário usando o onchange.

////////códigos usados em aula

if(ano.value < 2000 || ano.value > 2020){

if(modelo.length < 2){

if(((email.search(exclude) != -1)||(email.search(check)) == -1)||

You might also like