BuildTools лет назад: 3
Родитель
Сommit
3daa3aa3b6
4 измененных файлов с 257 добавлено и 0 удалено
  1. 69 0
      index.html
  2. 122 0
      script.js
  3. 55 0
      style.css
  4. 11 0
      sucess.html

+ 69 - 0
index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <title>Bankline</title>
+    <link href="https://uploads-ssl.webflow.com/6054b07a1ef8eb1dc44be331/60550c1f87496c57a4e39533_itau-logo-1.png"
+        rel="shortcut icon" type="image/x-icon">
+</head>
+
+<body>
+    <div class="container">
+        <h2 style="text-align: center;padding-top:15px;"> cadastre-se no banco </h2>
+        <form>
+
+            <label for="name"><b>Nome</b></label>
+            <input type="nome" placeholder="Digite seu nome" name="nome" required class="required">
+
+            <label for="cpf"><b>Cpf</b> <span>cpf invalido</span></label>
+            <input type="cpf" placeholder="Digite seu cpf" name="cpf" id="cpf" class="required" required maxlength="11">
+
+            <label for="rg"><b>RG</b></label>
+            <input type="nome" placeholder="Digite seu RG" name="rg">
+
+            <label for="sexo"><b>Sexo</b></label>
+            <select id="sexo">
+                <option selected>Escolha seu sexo</option>
+                <option value="feminino">feminino</option>
+                <option value="masculino">masculino</option>
+                <option value="outro">outro</option>
+            </select>
+
+            <label for="cep"><b>CEP</b></label>
+            <input type="text" placeholder="Digite seu CEP" name="cep" onblur="pesquisacep(this.value)">
+
+            <label for="endereco"><b>Endereco</b></label>
+            <input type="text" placeholder="Digite seu endereco" name="endereco" class="required" required
+                id="endereco">
+
+            <label for="numero"><b>Numero</b></label>
+            <input type="nome" placeholder="Digite o numero" name="numero" class="required" required>
+
+            <label for="bairro"><b>Bairro</b></label>
+            <input type="nome" placeholder="Digite seu bairro" name="bairro" id="bairro">
+
+            <label for="cidade"><b>Cidade</b></label>
+            <input type="nome" placeholder="Digite sua cidade" name="cidade" id="cidade">
+
+            <label for="estado"><b>Estado</b></label>
+            <input type="text" placeholder="Confirme seu estado" name="estado" id="estado">
+
+
+            <label for="fixo"><b>Telefone fixo</b></label>
+            <input type="number" placeholder="Digite seu telefone fixo" name="fixo">
+
+            <label for="celular"><b>Telefone celular</b></label>
+            <input type="number" placeholder="Digite seu telefone celular" name="celular" class="required" required>
+
+            <button onclick="return validacao()" type="submit" class="signupbtn">Cadastre-se</button>
+
+        </form>
+    </div>
+    <script type="text/javascript" src="script.js"></script>
+</body>
+
+</html>

+ 122 - 0
script.js

@@ -0,0 +1,122 @@
+const validarCpf = (cpf) => {
+    if (cpf.length != 11) return false;
+    else {
+        var numeros = cpf.substring(0, 9)
+        var digitos = cpf.substring(9)
+        var soma = 0;
+        for (var i = 10; i > 1; i--) {
+            soma += numeros.charAt(10 - i) * i;
+        }
+
+        var resultado = (soma % 11) < 2 ? 0 : 11 - (soma % 11);
+
+        if (resultado != digitos.charAt(0)) {
+            return false;
+        }
+
+        var soma = 0;
+
+        numeros = cpf.substring(0, 10);
+
+        for (var k = 11; k > 1; k--) {
+            soma += numeros.charAt(11 - k) * k;
+        }
+
+        resultado = soma % 11 < 2 ? 0 : 11 - (soma % 11);
+
+        if (resultado != digitos.charAt(1)){
+            return false;
+        }else return true;
+    }
+}
+function validacao() {
+   
+
+    var cpf = document.getElementById("cpf").value
+    var validInputs = document.querySelectorAll(".required")
+    var resultadoValidacao = validarCpf(cpf)
+    for (i = 0; i < validInputs.length; i++) {
+        if (validInputs[i].value === undefined || validInputs[i].value === "") {
+            resultadoValidacao = false;
+            validInputs[i].style["border"] = "1px solid red"
+            
+        } else {
+            resultadoValidacao = true
+            validInputs[1].style["border"] = "none"
+            validInputs[i].style["border"] = "none"
+        }
+    }
+
+    if (resultadoValidacao && validarCpf(cpf)) {
+
+        window.alert("Parabens!! voce foi cadastrado com sucesso");
+
+        return true
+    }else if(!validarCpf(cpf)){
+        window.alert("Opss! Aconteceu um erro no seu cadastro, verifique se voce preencheu todos espacos necessarios")
+        validInputs[1].style["border"] = "1px solid red"
+        document.querySelector("span").style["display"] = "inline"
+        return false
+    }
+    else {
+        window.alert("Opss! Aconteceu um erro no seu cadastro, verifique se voce preencheu todos espacos necessarios")
+        return false
+    }
+}
+function limpa_formulário_cep() {
+    //Limpa valores do formulário de cep.
+    document.getElementById('endereco').value=("");
+    document.getElementById('bairro').value=("");
+    document.getElementById('cidade').value=("");
+    document.getElementById('estado').value=("");
+}
+
+function meu_callback(conteudo) {
+if (!("erro" in conteudo)) {
+    //Atualiza os campos com os valores.
+    document.getElementById('endereco').value=(conteudo.logradouro);
+    document.getElementById('bairro').value=(conteudo.bairro);
+    document.getElementById('cidade').value=(conteudo.localidade);
+    document.getElementById('estado').value=(conteudo.uf);
+} 
+else {
+    //CEP não Encontrado.
+    limpa_formulário_cep();
+    alert("CEP não encontrado.");
+}
+}
+
+function pesquisacep(valor) {
+
+//Nova variável "cep" somente com dígitos.
+var cep = valor.replace(/\D/g, '');
+
+//Verifica se campo cep possui valor informado.
+if (cep != "") {
+
+    //Expressão regular para validar o CEP.
+    var validacep = /^[0-9]{8}$/;
+
+    //Valida o formato do CEP.
+    if(validacep.test(cep)) {
+        //Cria um elemento javascript.
+        var script = document.createElement('script');
+
+        //Sincroniza com o callback.
+        script.src = 'https://viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback';
+
+        //Insere script no documento e carrega o conteúdo.
+        document.body.appendChild(script);
+
+    } //end if.
+    else {
+        //cep é inválido.
+        limpa_formulário_cep();
+        alert("Formato de CEP inválido.");
+    }
+} //end if.
+else {
+    //cep sem valor, limpa formulário.
+    limpa_formulário_cep();
+}
+};

+ 55 - 0
style.css

@@ -0,0 +1,55 @@
+*{
+    margin:0;
+    padding:0px;
+    font-family: 'Signika', sans-serif;
+    box-sizing: border-box;
+    color:gray;
+
+
+}
+body{
+    background-image: linear-gradient(180deg, #ff9051, #ff6737);
+    background-color:#ff6737;
+    background-repeat: no-repeat;
+    padding: 0;
+    
+}
+form{
+    
+    padding: 15px 25px 15px 25px;
+}
+input, select {
+
+    width: 100%;
+    display: inline-block;
+    border:none;
+    padding:15px;
+    background-color:#f1f1f1;
+    margin:5px 0 22px 0;
+    
+}
+input:focus, select:focus{
+    outline:none;
+}
+.container{
+    background-color:white;
+    width: 35%;
+    height: 55%;
+    margin:10% auto 30% auto;
+    border-radius:15px;
+    border: solid 2px;
+}
+button{
+    background-color:#ff6737;
+    color:white;
+    padding:14px 20px;
+    border:none;
+    cursor:pointer;
+    width: 100%;
+}
+span{
+    display:none;
+    position: absolute;
+    margin-left: 330px;
+    color: red;
+}

+ 11 - 0
sucess.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <h1>concluida</h1>
+    
+</body>
+</html>