Upload de vários arquivos com PHP 22.856 visualizações 2 1 Fala pessoal, hoje irei ensinar a fazer upload de vários arquivos de uma vez, ou seja, ao invés de criar apenas um campo para o usuário selecionar o arquivo, vamos criar múltiplos campos e fazer o upload de cada arquivo para o servidor através do PHP. Clique aqui para fazer download do código 1. Formulário Vamos criar nosso formulário, vou utilizar aqui como exemplo cinco campos para upload: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>upload de vários arquivos com PHP</title> </head> <body> <h1>upload de vários arquivos com PHP</h1> <form action="<?php echo $_SERVER['PHP_SELF']?>" method="post" enctype="multipart/form-data"> <p><input type="file" name="arquivo[]" /></p> <p><input type="file" name="arquivo[]" /></p> <p><input type="file" name="arquivo[]" /></p> <p><input type="file" name="arquivo[]" /></p> <p><input type="file" name="arquivo[]" /></p> <p><input type="submit" value="enviar" /></p> </form> </body> </html> Criamos um formulário e na action definimos que os dados serão enviados para o próprio arquivo, através do $_SERVER['PHP_SELF']. Cada campo de upload receberá o mesmo nome, ou seja, arquivo, porém iremos colocar [] (colchetes) para que assim o php
interprete como um array, onde cada arquivo receberá um índice e assim nós poderemos manipular esses arquivos. * Lembrando que quando se trata de upload devemos definir a propriedade enctype= multipart/form-data ; 2. Upload com PHP Já que os dados serão enviados ao mesmo arquivo, vamos colocar nosso código PHP nesse mesmo arquivo, vou optar por colocá-lo entre o header 1 (h1) e o ínicio do formulário: 1 <?php 2 // DEFINIÇÕES 3 4 5 6 7 8 9 10 11 12 13 14 for ($i = 0; $i < $numerocampos; $i++) { 15 16 17 18 19 20 21 22 23 24 $erro = false; 25 26 27 28 29 30 31 // Numero de campos de upload $numerocampos = 5; // Tamanho máximo do arquivo (em bytes) $tamanhomaximo = 1000000; // Extensões aceitas $extensoes = array(".doc", ".txt", ".pdf", ".docx"); // Caminho para onde o arquivo será enviado $caminho = "uploads/"; // Substituir arquivo já existente (true = sim; false = nao) $substituir = false; // Informações do arquivo enviado $nomearquivo = $_FILES["arquivo"]["name"][$i]; $tamanhoarquivo = $_FILES["arquivo"]["size"][$i]; $nometemporario = $_FILES["arquivo"]["tmp_name"][$i]; // Verifica se o arquivo foi colocado no campo if (!empty($nomearquivo)) { // Verifica se o tamanho do arquivo é maior que o permitido if ($tamanhoarquivo > $tamanhomaximo) { $erro = "O arquivo ". $nomearquivo. " não deve ultrapassar ". $tamanhomaximo. " bytes"; // Verifica se a extensão está entre as aceitas
32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 elseif (!in_array(strrchr($nomearquivo, "."), $extensoes)) { $erro = "A extensão do arquivo <b>". $nomearquivo. "</b> não é válida"; // Verifica se o arquivo existe e se é para substituir elseif (file_exists($caminho. $nomearquivo) and!$substituir) { $erro = "O arquivo <b>". $nomearquivo. "</b> já existe"; // Se não houver erro if (!$erro) { // Move o arquivo para o caminho definido move_uploaded_file($nometemporario, ($caminho. $nomearquivo)); // Mensagem de sucesso echo "O arquivo <b>".$nomearquivo."</b> foi enviado com sucesso. <br />"; // Se houver erro else { // Mensagem de erro echo $erro. "<br />";?> Bom, apesar do código estar comentado, vou tentar detalhar o máximo possível: Linha 4: Definimos o número de campos para enviar arquivo, no nosso caso, 5; Linha 6: Definimos o tamanho máximo de cada arquivo, em bytes, no caso é equivalente a aproximadamente 1MB; Linha 8: Definimos todas as extensões válidas e colocamos em um array; Linha 10: Definimos a pasta onde os arquivos serão gravados (não esqueça de colocar uma / barra depois do nome da pasta); Linha 12: Definimos se deve ser ou não substituido um arquivo já existente, quando false, o arquivo não será substituido, quando true, o arquivo será substituido; Linha 14: Fazemos um loop para recuperar os dados, fazer a verificação e upload de cada campo de upload, o loop só irá terminar quando nosso contador ($i) for igual ao número de campos; Linhas 17, 18, 19: Recuperamos as informações do arquivo do campo;
Linhas 27, 28, 29: Se o tamanho do arquivo for maior que o definido, será gerado um erro; Linhas 31, 32, 33: Pegamos a extensão do arquivo através da função strrchr() e verificamos se ela está contida no array das extensões válidas, se não estiver, será gerado um erro; Linhas 35, 36, 37: Verificamos se o arquivo já existe e se deve ser substituido ou não; Linhas 40 a 45: Se não houver nenhum erro, movemos o arquivo que foi enviado para o caminho definido e exibimos a mensagem de sucesso, caso contrário um erro será exibido. Bom, espero que vocês tenham entendido. Qualquer dúvida entre em contato, ok? Espero que esse artigo tenha sido útil a vocês, abraços.
Formulário dinâmico com jquery Bom galera, é o primeiro post aqui e venho trazer a vocês uma forma de otimizar as páginas de cadastro com um formulário dinâmico através do jquery. Qual a ideia? A princípio a ideia é inserir o formulário de acordo com a demanda, não sobrecarregando a página com elementos que possivelmente não iram ser usados e identificar cada campo com o atributo name diferente para recuperá-los mais tarde. Bom, acho que consegui me expressar então vamos botar a mão na massa! HTML Primeiramente precisamos de nosso formulário? Código 01 <form method="get" action="processa.php"> 02 <table> 03 04 05 06 07 08 09 10 11 12 13 <thead> <tr> <th>item</th> <th>quantidade</th> </tr> </thead> <tbody> <tr> <td><input type="text" name="item1" size="60" /></td> <td><input type="text" name="quantidade1" size="10" /></td> </tr>
14 </tbody> 15 </table> 16 <!--Irá armazenar a quantidade de linhas--> 17 <input type="hidden" value="1" name="quantidade_itens" /> 18 </form> Agora precisamos de dois elementos que posteriormente irão disparar o envio do formulário e a inserção de novos inputs.? Código 1 <a href="#" id="enviar">enviar lista de compras</a> 2 <a href="#" id="mais">add Item</a> jquery Para enviar o formulário, iremos associar o seu método.submit() ao evento.click() de um dos elementos que criamos para este fim. Aqui utilizaremos o link com id enviar.? Código 1 // JavaScript Document 2 $('#enviar').click(function(){ 3 $('form').submit(); 4 ); E Agora o X da questão! Dentro do evento.click() do link com id mais vamos:
1. Armazenar numa variável a quantidade de linhas de nossa tabela. 2. Inserir o código html da linha que contém os inputs com a propriedade name concatenada com o número da linha a ser inserida que armazenamos na variável next. 3. E por fim atualizar o valor do elemento :hidden que usamos para armazenar a quantidade de linhas.? Código 01 $('#mais').click(function(){ 02 03 04 //recuperando o próximo numero da linha var next = $('#lista tbody').children('tr').length + 1; 05 06 07 08 09 10 //inserindo formulário $('#lista tbody').append('<tr>' + '<td><input type="text" name="item' + next + '" /></td>' + '<td><input type="text" name="quantidade' + next + '" /></td>' + '</tr>'); 11 12 13 //armazenando a quantidade de linhas ou registros no elemento hidden $(':hidden').val(next); 14 15 return false; 16 );
Mas pra que serve saber a quantidade de linhas de registros neste formulário? É simples, como criamos o formulário dinâmico, devemos informar à página que irá receber os dados qual a quantidade de registros que ela irá receber. Pronto, o script já está funcionando. Mas para um melhor entendimento mostraremos como a página irá receber estes dados. PHP A pagina deverá conter uma variável para recuperar a quantidade de itens, (lembra aquela que comentamos?) e um loop que terá como limite nossa variável. Dentro dele basta recuperar os valores concatenando a propriedade name do campo com o número da repetição.? 01 <?php 02 Código 03 $quantidade_itens = $_GET['quantidade_itens']; 04 05 for ( $x = 1; $x <= $quantidade_itens ; $x++ ){ 06 07 08 $item = $_GET["item$x"]; $quantidade = $_GET["quantidade$x"]; 09 10 //aqui seu código com o uso dos valores capturados 11 12 13?>
Veja a Demo O que fizemos basicamente? Inserimos através do método.append() os inputs com o atributo name concatenado com a quantidade de linhas mais 1, que atribuímos à variável quantidade. Sendo assim somente o final da propriedade name irá mudar, facilitando a recepção dos dados por outra página. Implementando então uma inserção dinâmica onde todos os valores poderão ser capturados. Obs:. É bom lembra que essa é uma das formas de se fazer cada um pode implementar da maneira que quiser mas o conceito, como já mencionei, é sempre o mesmo. Atenção para a dica: Aqui não foi associado nenhum evento aos inputs, mas se necessário, é preciso utilizar o método.live() para que este evento se estenda a todos os inputs. Um abraço e até o próximo post!
Upload dinâmico com PHP/jQuery 43.025 visualizações 27 20 http://rafaelcouto.com.br/upload-dinamico-com-php-jquery/ Olá pessoal, tudo certo? Várias pessoas me perguntam como fazer upload de arquivos com ajax e hoje pretendo apresentar uma solução para isso. Na verdade, não se trata de um upload com ajax, mas sim um upload dinâmico, porém para um usuário comum isso é indiferente. A solução é simples e conhecida: fazer um iframe contendo um campo do tipo file, fazemos o envio desse arquivo dentro do iframe e então com a ajuda do jquery recuperamos as informações desse arquivo e trazemos para a página pai. Nesse artigo irei utilizar anexo de arquivos como exemplo. Confira o resultado final 1. Upload (upload.php) Inicialmente iremos fazer uma página que fará o upload de um arquivo, assim como é feito normalmente. Caso você tenha dúvidas, pode consultar esses dois artigos: Upload simples de imagem com PHP/MySQL e Upload de vários arquivos com PHP. <?php // Flag que indica se há erro ou não $erro = null; // Quando enviado o formulário if (isset($_files['arquivo'])) { // Extensões permitidas $extensoes = array(".doc", ".txt", ".pdf", ".docx", ".jpg"); // Caminho onde ficarão os arquivos $caminho = "uploads/"; // Recuperando informações do arquivo $nome = $_FILES['arquivo']['name']; $temp = $_FILES['arquivo']['tmp_name']; // Verifica se a extensão é permitida
if (!in_array(strtolower(strrchr($nome, ".")), $extensoes)) { $erro = 'Extensão inválida'; // Se não houver erro if (!isset($erro)) { // Gerando um nome aleatório para o arquivo $nomealeatorio = md5(uniqid(time())). strrchr($nome, "."); // Movendo arquivo para servidor if (!move_uploaded_file($temp, $caminho. $nomealeatorio)) $erro = 'Não foi possível anexar o arquivo';?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>upload dinâmico com jquery/php</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <form id="upload" action="upload.php" method="post" enctype="multipart/form-data"> <label>arquivo: </label> <span id="status" style="display: none;"><img src="image/loader.gif" alt="enviando..." /></span> <br /> <input type="file" name="arquivo" id="arquivo" /> </form> </body> </html> Bom pessoal, nesse arquivo será feito apenas um upload simples. Resumindo, quando enviado o formulário nós recuperamos as informações desse arquivo, verificamos se sua extensão é válida, caso seja, geramos um nome aleatório para esse arquivo e enviamos para o servidor. Vamos agora criar nosso código javascript (utilizando jquery), que será incluído no cabeçalho desse arquivo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 $(function($) { // Definindo página pai var pai = window.parent.document; <?php if (isset($erro)): // Se houver algum erro?> // Exibimos o erro alert('<?php echo $erro?>'); <?php elseif (isset($nome)): // Se não houver erro e o arquivo foi enviado?> // Adicionamos um item na lista (ul) que tem ID igual a "anexos" $('ul#anexos', pai).append('<li lang="<?php echo $nomealeatorio?>"><?php echo $nome?> <img src="image/remove.png" alt="remover" class="remover" onclick="removeanexo(this)" \/> </li>'); <?php endif?> // Quando selecionado um arquivo $("#arquivo").change(function() { // Se o arquivo foi selecionado if (this.value!= "") { // Exibimos o loder $("#status").show(); // Enviamos o formulário $("#upload").submit(); ); ); Talvez não faça tanto sentido agora, porém mais adiante você entenderá melhor, vamos aos detalhes: Linha 3: Como esse arquivo ficará dentro de um iframe, precisamos saber quem é a página pai, para isso definimos uma variável com o documento da página pai; Linha 5, 8: Aqui está um detalhe interessante. Como a linguagem servidor (PHP) é executada primeiro que a cliente (javascript), nós fazemos um teste. Se a variável erro foi definida, nós imprimimos um alert, que depois será executada pelo javascript, que exibirá uma mensagem de alerta com o erro que foi armazenado; Linha 10: Caso não haja erro, e a variável nome foi definida, ou seja, o arquivo foi enviado;
Linha 13: Colocamos na lista (que será criada adiante) com ID igual a anexos um item, porém perceba que foi passado no segundo parâmetro do seletor a variável pai, portanto ele irá buscar o ul#anexos da página pai. Nesse item colocamos o nome aleatório do arquivo na propriedade LANG. Logo após, colocamos uma imagem que será responsável por remover o anexo, note que definimos, no evento onclick, a chamada da função removeanexo(), está será explicada adiante. Linha 18: Quando o usuário selecionar um arquivo. Linha 20: Verificamos se um arquivo foi realmente selecionado. Linha 23: Exibimos nosso loader (carregando). Linha 25: Enviamos o formulário via javascript. 2. A página pai (index.php) Está será a página principal, onde colocaremos o iframe que incluirá o nosso arquivo de upload: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>upload dinâmico com jquery/php</title> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <h1>upload dinâmico com jquery/php</h1> <ul id="anexos"></ul> <iframe src="upload.php" frameborder="0" scrolling="no"></iframe> <form id="upload" action="index.php" method="post"> <input type="submit" name="enviar" value="enviar" /> </form> </body> </html>
Nessa estrutura, criamos a lista (ul#anexos) onde serão adicionados os anexos, logo abaixo criamos nosso iframe e chamamos nosso arquivo de upload (upload.php). A essa altura, nosso upload dinâmico já está funcional, porém precisamos criar a função para remover o anexo: 1 // Função para remover um anexo 2 function removeanexo(obj) 3 { 4 // Recuperando nome do arquivo 5 var arquivo = $(obj).parent('li').attr('lang'); 6 // Removendo arquivo do servidor 7 $.post("index.php", {acao: 'removeanexo', arquivo: arquivo, function() { 8 // Removendo elemento da página 9 $(obj).parent('li').remove(); 10 ); 11 Linha 2: Criamos nossa função que receberá como parâmetro o elemento da imagem; Linha 5: A imagem está dentro do item (li), certo? Portanto, através do método parent() selecionamos o item (li) e pegamos o valor da propriedade LANG (Lembra que colocamos o nome do arquivo aqui?); Linha 7: Fazemos uma requisição ajax com nosso próprio arquivo, e passamos como ação removeanexo e também o nome do arquivo anexado. Isso será preciso para que possamos remover o arquivo do servidor; Linha 9: Quando terminado a requisição, removemos o elemento li de nossa página. Vamos então criar a função PHP (logo no inicio do arquivo) que removerá o arquivo do servidor: <?php // Quando a ação for para remover anexo if ($_POST['acao'] == 'removeanexo') { // Recuperando nome do arquivo $arquivo = $_POST['arquivo']; // Caminho dos uploads $caminho = 'uploads/'; // Verificando se o arquivo realmente existe if (file_exists($caminho. $arquivo) and!empty($arquivo)) // Removendo arquivo
unlink($caminho. $arquivo); // Finaliza a requisição exit;?> Parece que agora acabou né? Ainda não. Como iremos recuperar esses anexos quando enviado o formulário? Já que nosso formulário está simplesmente assim: <form id="upload" action="index.php" method="post"> <input type="submit" name="enviar" value="enviar" /> </form> A solução é criar campos ocultos com os nomes dos arquivos quando enviado o formulário, para isso: $(function($) { 1 // Quando enviado o formulário 2 $("#upload").submit(function() { 3 // Passando por cada anexo 4 $("#anexos").find("li").each(function() { 5 // Recuperando nome do arquivo 6 var arquivo = $(this).attr('lang'); 7 // Criando campo oculto com o nome do arquivo 8 $("#upload").prepend('<input type="hidden" name="anexos[]" value="' + 9 arquivo + '" \/>'); 10 ); 11 ); 12 ); Linha 3: Quando nosso formulário for enviado; Linha 5: Procuramos cada item (li) em nossa lista de anexo e passamos por cada um através do laço each(); Linha 7: Recuperamos o nome (aleatório) do arquivo que foi armazenado na propriedade LANG; Linha 9: Através do prepend() adicionamos um campo oculto (hidden) dentro de nosso formulário (#upload) e colocamos o nome do arquivo como valor. Note que atribuímos o nome como anexos[] para que assim possamos recuperar os anexos já dentro de um array com PHP. Agora, para fins de teste você pode adicionar o seguinte no inicio do arquivo:
// Se enviado o formulário if (isset($_post['enviar'])) { echo 'Arquivos enviados: '; echo '<pre>'; // Exibimos os arquivos anexados print_r($_post['anexos']); echo '</pre>'; Assim, você pode perceber, que quando enviado o formulário, o nome de nossos arquivos ficaram no array anexos e então podemos armazená-los no banco de dados, por exemplo.
jquery: Duplicar campos de formulários (2) http://www.zatecus.com/blog-jquery-duplicar-campos-de-formularios-2-post.html Olá pessoal! Muitos leitores gostaram de meu post onde ensinei a duplicar campos de formulários utilizando o jquery. Bem, volto novamente a ensinar esta dica através do código fonte comentado, porém, com novas funcionalidades! Agora é possível remover linhas da tabela e a definir um limite máximo de linhas! Confira! Começando com o HTML... 01 <form action="pagina.php" method="post"> 02 <table cellpadding="4" cellspacing="0" border="1"> <thead 03 > 04 <tr> 05 <td>dia</td> 06 <td>hora</td> 07 <td>resultado</td> 08 <td>seleção</td> <td> </td 09 > 10 </tr> 11 </thead> 12 <tbody id="repetir"> 13 <tr id="linha_1"> 14 <td><input type="text" name="dia[]" value="" /></td> 15 <td><input type="text" name="hora[]" value="" /></td> 16 <td><input type="text" name="resultado[]" value="" /></td>
17 <td> 18 <select name="selecao[]"> 19 <option></option> 20 <option value="1">seleção 1</option> 21 <option value="2">seleção 2</option> 22 <option value="3">seleção 3</option> 23 </select> 24 </td> <td><input type="button" value="remover" id="remove" 25 onclick="$.removelinha(this);" /></td> 26 </tr> 27 </tbody> 28 <tfoot> 29 <tr> <td align="right" colspan="5"><input type="button" value="adicionar" 30 id="add" /><input type="submit" value="enviar" /></td> 31 </tr> </tfoot 32 > 33 </table> 34 </form> No código acima, destaco este trecho de exemplo para explicar... 1 <input type="text" name="dia[]" value="" /> Para quem não sabe, estas chaves "[]", presentes dentro do atributo name, servem para fazer o formulário guardar as informações de cada linha em uma array, podendo assim serem lidas pelo PHP ou outra linguagem utilizada. Agora, o código em jquery que faz tudo acontecer!
01 /* Função jquery para remover linha */ 02 03 $.removelinha = function (element) 04 { 05 06 /* Conta quantidade de linhas na tabela */ 07 08 var linha_total = $('tbody#repetir tr').length; 09 10 /* Condição que mantém pelo menos uma linha na tabela */ 11 12 if (linha_total > 1) 13 { 14 15 /* Remove os elementos da linha onde está o botão clicado */ 16 17 $(element).parent().parent().remove(); 18 19 20 21 /* Avisa usuário de que não pode remover a última linha */ 22 23 else 24 { 25 26 alert("desculpe, mas você não pode remover esta última linha!"); 27 28 29 30 ; 31 32 /* Quando o documento estiver carregado */ 33 34 $(document).ready(function()
35 { 36 37 /* Variável que armazena limite de linhas (zero é ilimitada) */ 38 39 var limite_linhas = 5; 40 41 /* Quando o botão adicionar for clicado... */ 42 43 $('#add').click(function() 44 { 45 46 /* Conta quantidade de linhas na tabela */ 47 48 var linha_total = $('tbody#repetir tr').length; 49 50 /* Condição que verifica se existe limite de linhas e, se existir, testa se usuário atingiu limite */ 51 52 if (limite_linhas && limite_linhas > linha_total) 53 { 54 55 /* Pega uma linha existente */ 56 57 var linha = $('tbody#repetir tr').html(); 58 59 /* Conta quantidade de linhas na tabela */ 60 61 var linha_total = $('tbody#repetir tr').length; 62 63 /* Pega a ID da linha atual */ 64 65 var linha_id = $('tbody#repetir tr').attr('id'); 66 67 /* Acrescenta uma nova linha, incluindo a nova ID da linha */
68 69 70 $('tbody#repetir').append('<tr id="linha_' + (linha_total + 1) + '">' + linha + '</tr>'); 71 72 73 /* Se usuário atingiu limite de linhas */ 74 75 else 76 { 77 alert("desculpe, mas você só pode adicionar até " + limite_linhas + " linhas!"); 78 79 80 ); 81 82 ); Nota: Incluir o código jquery acima dentro das tags <script>, é claro! Confira uma demonstração clicando aqui. Abraços a todos e façam bom proveito do código! :)
Validando Formulários com Javascript 31.172 visualizações 12 1 Com o PHP ou ASP, podemos validar um formulário, porém é necessário atualizar a página e tudo acaba sendo mais demorado. Com Javascript isso fica mais fácil, pois não é necessário nem atualizar a página. Mas lembrando que é necessário também a validação com o lado servidor (PHP ou ASP), pois o javascript pode ser burlado. Clique aqui para ver o que será feito É uma validação simples, porém de muita utilizadade. Vamos ao código (O código completo está disponível para download no final do artigo): 1. Criando o formulário: Primeiramente, vamos fazer nosso formulário: 1 <html> 2 <head> 3 <title>validando Formulários com Javascript</title> 4 </head> 5 <body> 6 <form name="form1" action="enviar.php" method="post"> 7 Nome: 8 <input name="nome" type="text"><br /><br /> 9 Email: 10 <input name="email" type="text"><br /><br /> 11 Senha: 12 <input name="senha" type="password"><br /><br /> 13 Repitir Senha: 14 <input name="rep_senha" type="password"><br /><br /> 15 <input type="submit" onclick="return validar()"> 16 </form> 17 </body> 18 </html> - Bom aqui criamos o formulário; - Linha 15: [onclick="return validar()"] estamos chamando a função validar() no momento que o usuário clicar em enviar; 2. Criando a função validar()
Agora, vamos criar nosso código javascript para fazer validação, lembrando que esse código deve estar, de preferência, entre as tags head (cabeçalho): 1 <script language="javascript" type="text/javascript"> 2 function validar() { 3 4 </script> - No código acima foi criada a função validar(); 1 <script language="javascript" type="text/javascript"> 2 function validar() { 3 var nome = form1.nome.value; 4 var email = form1.email.value; 5 var senha = form1.senha.value; 6 var rep_senha = form1.rep_senha.value; 7 8 </script> - Dentro de nossa função criamos as varíaveis para cada campo de nosso formulário; - Linha 3: criamos a varíavel nome e atribuimos o valor do campo nome, ou seja form1.nome.value (Valor do campo nome do nosso formulário); - O mesmo foi feito nas linhas 4, 5 e 6; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script language="javascript" type="text/javascript"> function validar() { var nome = form1.nome.value; var email = form1.email.value; var senha = form1.senha.value; var rep_senha = form1.rep_senha.value; if (nome == "") { alert('preencha o campo com seu nome'); form1.nome.focus(); return false; </script> - Linha 8: Se nome (O campo nome, pois declamos a variável) estiver em branco, as ações serão executadas; - Linha 9: Dispara uma mensagem de alerta dizendo que o usuário deve preencher o campo nome; - Linha 10: Da foco no campo nome; - Linha 15: Retorna a resposta false, ou seja, que não deve continuar enviando os dados;
- Resumindo, caso o campo nome esteje em branco será exibido uma mensagem de alerta dizendo ao usuário que preencha o campo com seu nome; - O mesmo pode e será feito com os outros campos; 1 if (nome.length < 5) { 2 alert('digite seu nome completo'); 3 form1.nome.focus(); 4 return false; 5 - Podemos verificar também se um campo tem o número de caracteres mínimo/máximo especificado. - Para isso utilizamos length, ou seja, se o numero de caracteres do campo nome for menor que 5 a ação será executada. 1 if (senha!= rep_senha) { 2 alert('senhas diferentes'); 3 form1.senha.focus(); 4 return false; 5 - Podemos também ver se dois campos coincidem, no caso a senha e sua repetição; - Se senha (campo senha) for diferente de rep_senha (Campo Repitir Senha) as ações serão executadas; - Podemos utilizar todos os métodos de comparação: Menor que: < Maior que: > Igual a: == Diferente de:!= Conclusão Isso é só um pouco do que o javascript pode fazer, mas já é útil para validar seus formulários de uma forma mais rápida e fácil.