Este artigo compartilha os métodos comuns de JavaScript para processamento de eventos de formulário para sua referência. O conteúdo específico é o seguinte
1. Métodos comuns para acessar objetos de formulário:
①: De acordo com o atributo de identificação do elemento <morm>;
var myForm = document.getElementById ("myformid"); // myformid é o id de um elemento <form>;
②: De acordo com o atributo de nome do elemento <morm>;
var myForm = document.forms ["myformName"]; // myformName é o nome de um elemento <form>;
③: Use o nome do formulário diretamente para acessar o formulário:
var myForm = document.myformName; // myformName é o nome de um elemento <form>;
2. Eventos comuns para formulários:
① Evento Onsubmit: Este evento será acionado ao clicar no botão "Enviar" e pode impedir o envio do formulário. Exemplo: verificação de formulários;
Event Evento de troca: Este evento é acionado quando o usuário altera o conteúdo e a caixa de texto perde o foco;
Exemplo: envio de formulário
Interface da recepção:
Código da interface em primeiro plano:
<Form Name = "MyForm" Action = "JavaScript: Alert ('Registrado com sucesso!');" Method = "Post" OnsubMit = "Return yanzheng ();"> <table> <tbody> <tr> <td> nome de usuário: </td> <td> <name de entrada = "nome de usuário" ids = "userring" type = "text"/> </td> <td align = "left"> <p styne "<p" "<p" type = "text"/> </td> <td align = "esquerdo"> <p estilo = " </td> </tr> <tr> <td> senha: </td> <td> <input id = "senha" onchange = "severLeave ()" type = "senha"/> </td> <td align = "esquerda"> <p style = "color: #ff0000"> <input iD = "1 "1 "1 ") <input id = "button2" type = "button" value = "médio" style = "background-color: #ff0000"/> <input id = "button3" type = "button" value = "fort" style = "background-color: #ff0000"/> <rótulo id = "llavel"> </etc. id = "idade" type = "text"/> </td> <td> <input id = "idade" type = "text"/> </td> <td> <p style = "cor: #ff0000">*</p> </td> </tr> <tr> <td> gender: </td> <td "" /> Masculino <input name = "sexo" type = "radio" value = "feminino"/> feminino </td> <td> align = "esquerd"> <p style = "cor: #ff0000">*</p> </td> </tr> <tr> <t> <t> content: </td> <td> <stlegy typexbbox "Name" Name "Name" Name "Name" " name = "content" value = "entretenimento"/> entretenimento <input type = "caixa de seleção" name = "content" value = "educação"/> entretenimento </td> <td align = "left"> <p style = "cor: #ff0000">*</p> </td> </tr> <tr> <t> <t> educação ">*</ value = "1"> escola primária </pption> <opção value = "2"> escola sênior </pption> <opção value = "3"> universidade </pption> <opção value = "4"> universidade </pption> </leclect> </td> <td align = "esquerd"> <p style = "cor: #ff0000"> </p> </td> <Td> <selecione name = "como" size = "6" múltiplo = "múltiplo"> <opção value = "1"> basquete </pption> <opção value = "2"> futebol </pption> <opção value = "3"> voleibol </option> <pution> value = "4"> executando </opção <opção = "5"> Hilling </option> </option> <Torness> align = "esquerda"> <p style = "cor: #ff0000">*</p> </td> </tr> <tr> <td> <input id = "button4" type = "button" onclick = "checkinfo ()" value "/" view Information "/> </td> <td> <sput typed" "Name" = "Name =" Name = "/" </td> <t) " <td> <input type = "submit" name = "tijiao" value = "register"/> </td> <td> <input type = "reset" name = "reset" value = "reset"/> </td> </tr> </tbody> </tabela </form>Script JS:
<script type = "text/javascript"> function yanzheng () {var b; var a = document.getElementById ("nome de usuário"); // Obtenha o valor do nome de usuário var p = document.getElementById ("senha"); // Obtenha o valor da senha var idade = myform.age.value; // Obtenha o valor da idade se (a.value.length <5 || a.value.length> 10) {alert ("O nome de usuário que você inseriu é um formato incorreto!"); retornar falso; } else if (p.Value.Length <5) {alert ("O comprimento da senha é menor que 5!"); retornar falso; } else if (! checkage (idade)) {return false; } else {return true; }} verificação da função (a) {// Verifique a idade var ch, idade; for (var i = 0; i <a.Length; i ++) {ch = a.charat (i); if (CH <"0" || CH> "9") {alert ("Por favor, digite o número na opção de idade!"); retornar falso; }} Age = parseint (a); if (idade <10 || idade> 100) {alert ("idade não é verdadeira!"); retornar falso; } retornar true; } função checkInfo () {// Mostrar todas as informações var userName = myform.username.value; // Obtenha nome de usuário var senha = myform.password.value; // obtenha senha var Age = myForm.age.value; // obtenha idade var sex = myform.sex; // obtenha gênero var osex = ""; // Defina uma opção para obter gênero var content = myform.content; // Obtenha conteúdo var ocontent = ""; // Defina uma opção para obter conteúdo var eduleave = myform.edu_level; // obtenha educação var oedu = ""; // Defina uma opção para obter educação var intersent = myform.like; // Obtenha formulário hobby var como = ""; // Defina uma variável para obter a opção de hobby para (var i = 0; i <sex.length; i ++) {// gênero if (sexo [i] .Checked) {osex = sexo [i] .Value; }} para (var i = 0; i <content.length; i ++) {// content if (content [i] .Checked) {Ocontent += content [i] .Value +""; }} para (var i = 0; i <eduleave.length; i ++) {// educacional if (eduleave.SelectedIndex> = 0) {oedu = eduleave.options [eduleave.SelectedIndex] .text; }} para (var i = 0; i <intersent.length; i ++) {// hobbies if (intersent.options [i] .Selected) {olike += intersent.options [i] .text +""; }} alert ("Seu nome de usuário é:" + nome de usuário + "/n senha é:" + senha + "/n idade é:" + idade + "/n gênero é:" + ocontent + "/n educação é:" + oedu + "/n hobbies são:" + olike); } função senha senhaLeave () {var passwordLeavel = myform.password.value; if (senha -selavel.length == "") {document.getElementById ("button1"). style.display = "nenhum"; document.getElementById ("Button2"). style.display = "nenhum"; document.getElementById ("Button3"). style.display = "nenhum"; } else {if (passwordLeavel.length <= "5") {document.getElementById ("button1"). style.display = ""; document.getElementById ("Button2"). style.display = "nenhum"; document.getElementById ("Button3"). style.display = "nenhum"; } else if (senhaLeavel.length <= "10") {document.getElementById ("button1"). style.display = ""; document.getElementById ("Button2"). style.display = ""; document.getElementById ("Button3"). style.display = "nenhum"; } else {document.getElementById ("Button1"). style.display = ""; document.getElementById ("Button2"). style.display = ""; document.getElementById ("Button3"). style.display = ""; }}} função startbody () {document.getElementById ("button1"). style.display = "nenhum"; document.getElementById ("Button2"). style.display = "nenhum"; document.getElementById ("Button3"). style.display = "nenhum"; } </script>Este caso é apenas algumas práticas comuns e não envolve nenhuma tecnologia, mas é apenas para a conveniência do uso da próxima vez.
O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.