Pergunta: Como verificar o formulário imediatamente após a entrada, em vez de verificá -lo depois de enviá -lo é tão inconveniente (as pesquisas on -line são ambíguas ou incompletas ...)
Método: Em vista disso, Xiaoke, Shuishanqi, preencha o código e adicione o entendimento pessoal (notações) de Xiaoke. É apenas para os retardatários evitar desvios. Por favor, critique e corrija todos os tipos de heróis ... (Observe o autor, xiexie) - - Versão da tabela de tabela, e haverá versão jQuery no futuro ...
Se ajudar você, experimente (o) 〃AO ~
Captura de tela:
Código:
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> registro de usuário </title> <!-o estilo CSS externo é referido aqui-> <link Rel = "Stylesheet" type = "text/javaScript"> // Verificação oportuna do nome de usuário Função checkUse () {// Definindo a variável de verificação em cada função é poder verificar se cada função passa uma a uma após o envio do formulário, o que é muito bom. (O mesmo da seguinte) var verificação; var userName = document.getElementById ("nome de usuário"). if (nome de usuário.length> 18 || nome de usuário.length <6) {alert ("A entrada do nome de usuário é ilegal, por favor, volte!"); // Isso é muito maravilhoso. Desde que você entrou no lugar errado aqui, em teoria, é claro que você deve continuar entrando aqui. (Continue a obter foco aqui!) Document.getElementById ("Nome de usuário"). Focus (); check = false; } else {document.getElementById ("checkText1"). innerhtml = "* O nome de usuário consiste em caracteres de 6 a 18 bits √"; check = true; } retornar cheque; } // Use expressões regulares para determinar se a senha atende à função checkpwd () {var check; var reg = /[^a-za-z0-9 _]+ /; var regs = /^[a-za-z0-9_ /u4e00- /u9fa5] + $ /; var senha = document.getElementById ("senha"). value; if (senha.length <6 || senha.length> 18 || regs.test (senha)) {alert ("A entrada de senha é ilegal, entre em contato!"); document.getElementById ("senha"). Focus (); check = false; } else {document.getElementById ("checkText2"). innerhtml = "* A senha consiste em 6-18 caracteres e deve conter letras, números e marcas de pontuação √"; check = true; } retornar cheque; } // Verifique se a senha é inconsistente! função checkpwdc () {var check; var senha = document.getElementById ("senha"). value; var pwdc = document.getElementById ("pwdc"). value; if (senha! = pwdc) {alert ("A senha é inconsistente quando a senha é inserida, entre em volta!"); document.getElementById ("PWDC"). Focus (); check = false; } else {document.getElementById ("checkText3"). innerhtml = "* Por favor, digite sua senha novamente √"; check = true; } retornar cheque; } // Verifique a categoria do usuário ao enviar a função checkut () {var check; if (document.getElementById ("SelUser"). SelectedIndex == 0) {alert ("Selecione o tipo de usuário!"); document.getElementById ("SelUser"). Focus (); check = false; } else {document.getElementById ("checkText4"). innerhtml = "* Selecione o tipo de usuário √"; check = true; } retornar cheque; } // Verifique o gênero do usuário ao enviar a função checkgender () {var check; var gênero = ""; // Obtenha todas as tags com o nome sexo var sex = document.getElementsByName ("Sex"); // transfira essas tags com o nome sexo para (var i = 0; i <sex.length; ++ i) {// Se um sexo for selecionado, registre se (sexo [i]. } if (gênero == "") {alert ("Por favor, selecione Gênero!"); check = false; } else {document.getElementById ("checkText5"). innerhtml = "* Selecione seu gênero"; check = true; } retornar cheque; } // Verifique oportunamente a data da função de nascimento CheckDate () {var check; if (document.getElementById ("txtDate"). value == "") {alert ("Por favor, preencha a data de nascimento!"); document.getElementById ("txtDate"). focus (); check = false; } else {document.getElementById ("checkText6"). innerhtml = "* Selecione sua data de nascimento"; check = true; } retornar cheque; } // Verifique oportunamente os interesses e hobbies função checkHobby () {var check; var hobby = 0; // objnum é todos tags de entrada com o nome hobby var objnum = document.getElementsByName ("hobby"); // transfira todas as tags de hobby para (var i = 0; i <objnum.length; ++ i) {// julga se uma tag de hobby é selecionada se (objnum [i] .checked == true) hobby ++; } // Se houver uma tag de hobby selecionada se (hobby> = 1) {document.getElementById ("checkText7"). INnerHtml = "* Selecione seu hobby √"; check = true; } else {alert ("Por favor, preencha o hobby!"); check = false; } retornar cheque; } // Email de verificação de expressão regular (oportuno) função checkmail () {var check; // Expressão regular do email var e1 = document.getElementById ("email"). value.indexof ("@", 0); var e2 = document.getElementById ("email"). value.IndexOf (".", 0); if (email == "" || (e1 ==-1 || e2 ==-1) || e2 <e1) {alert ("erro de entrada e_mail!"); document.getElementById ("email"). focus (); check = false; } else {document.getElementById ("checkText8"). innerhtml = "* Por favor, preencha o email comumente usado, que será usado para recuperar a senha √"; check = true; } retornar cheque; } // Verificação oportuna da função de auto-introdução checkIntro () {var check; var intro = document.getElementById ("Introdução"). if (intro.length> 100) {alert ("contagem de palavras excede o limite!"); check = false; } else {document.getElementById ("checkText9"). innerhtml = "* limitado a 100 palavras"; document.getElementById ("checkText9"). Focus (); check = true; } retornar cheque; } // Todas as verificações são realizadas ao enviar o formulário (se alguma verificação falhar, ele será devolvido ao FALSE para impedir o envio do formulário) Função check () {var check = checkUse () && checkpwd () && checkTwdc () && checkUt () && CheckGender () && CheckHobM () && CheckUt () && CheckT () && CheckTw () &&) &&) & & & & & & & & &&) Verificação de retorno; } </script> </ad Head> <body> <!-<formulário de formulário = "Jump Page" Method = "get" | "post" name = "nome do formulário" Target = "Abrir com" Enctype = "Multipart/Form-Data">-> <!-Onsubmit () Função envia um formulário quando o valor de retorno é verdadeiro. -> <form action = "#" Method = "Get" OnsubMit = "Return check ()"> <Fieldset> <legend> Pequeno exemplo de verificação oportuna do formulário </legend> <tabela align = "esquerdo" style = "Background-Image: url ('img/4.jpg');" > <tr> <td> nome de usuário: </td> <td> <input type = "text" name = "userName" id = "userName" onchange = "checkUse ()"/> </td> <td id = "checkText1">* nome do usuário consiste em 6-18 caracteres </td> <! Manipulador de eventos OnChange: acionado quando um elemento de formulário obtém foco e o conteúdo muda-> <!-a seguir é o mesmo-> <tr> <td> senha: </td> <td> <input type = "senha" name = "senha" od = "senha" ONCHANGE = "checkpwd ()"/> </td> <td id = "" Marcas de pontuação </td> </tr> <tr> <td> Confirmar senha: </td> <td> <input type = "senha" name = "pwdc" id = "pwdc" onchange = "checkpwdc ()"/> </td> <td id = "checktxt3">***. </td> <td> <select id = "SelUser" onblur = "checkUt ()"> <opção name = "SelUser" value = "0"> Selecione </pption> <opção name = "SelUser" value = "1"> admin </option> <option name = "SELUSER" = "2"> Ordinary </option> <//option> tipo </td> </tr> <tr> <td> gênero: </td> <td> <input type = "radio" value = "1" name = "sexo" onchange = "checkGender ()"/> masculino <input type = "radio" value = "2" name = "sexo" onchange = "check)"/> fêmea "/" Gênero </td> </tr> <tr> <td> Data de nascimento: </td> <td> <input type = "date" name = "date" id = "txtdate" onblur = "checkDate ()"/td> </td> <td id = "checkText6">* Selecione o seu host de </td> <input type = "caixa de seleção" name = "hobby" value = "lendo" onchange = "checkHobby ()"> lendo <input type = "checkbox" name = "hobby" value = "music" onchange = "checkhobby ()"> music <but type = "caixa de seleção" name = "hobby"/"esportes" <) e "sports"> " id = "checkText7">* Selecione seus hobbies </td> </tr> <ttr> <td> email: </td> <td> <input type = "text" name = "email" id = "email" usest uselt = "checkEMAIL ()"/> <td> <td id = "checkText8">**, por favor, o que não é, ",", ", em e email", que não se pode usar <e email ", que não é o que e email" e ",", ", o que o e -mail, o que você está fazendo com o uso de pessoas com sepão, o que é o número de mais. <tr> <td> Auto-introdução: </td> <td> <textarea cols = "30" lobos = "3" name = "introdução" id = "introdução" onchange = "checkIntro ()"> TRUM uma auto-introdução ... </textarea> </td> <td id = "" colspan = "2" align = "Center"> <input type = "submit" name = "submit" value = "submit"/> <input type = "reset" name = "reset" value = "reset"/> </td> </tr> </tabela> </fieldset> </fort> </body> </html>Estilo CSS:
Entrada: foco, textarea: foco {borda: 1px Solid #f00; Antecedentes: #fcc; } textarea {width: 230px; Altura: 50px; } corpo {font-size: 15px; /* Estilo de fonte*/ Font-Family: Microsoft Yahei; } Selecione a opção {font-size: 10px; Fonte-família: Microsoft Yahei; }O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.