Este artículo comparte los métodos comunes de JavaScript para el procesamiento de eventos de formulario para su referencia. El contenido específico es el siguiente
1. Métodos comunes para acceder a objetos de formulario:
①: Según el atributo de identificación del elemento <form>;
var myForm = document.getElementById ("myFormid"); // myFormid es la identificación de un elemento <form>;
②: Según el atributo de nombre del elemento <Form>;
var myForm = document.forms ["myFormName"]; // myFormName es el nombre de un elemento <form>;
③: use el nombre del formulario directamente para acceder al formulario:
var myForm = document.myFormName; // myFormName es el nombre de un elemento <form>;
2. Eventos comunes para formas:
① Evento de OnSubmit: este evento se activará al hacer clic en el botón "Enviar" y puede evitar el envío del formulario. Ejemplo: verificación de formas;
② Evento de cambio: este evento se activa cuando el usuario cambia de contenido y el cuadro de texto pierde el enfoque;
Ejemplo: envío del formulario
Interfaz de recepción:
Código de interfaz de primer plano:
<form de nombre = "myform" action = "javaScript: alert ('registrado con éxito!');" método = "post" onsubMit = "return yanzheng ();"> <table> <tbody> <tr> <td> username: </td> <td> <input name = "username" id = "username" type = "text"/> </td> <td align = "izquierda"> <p style = "color: #ff0000">***Útiles "la longitud de 6-10 </p> p. </td> </tr> <tr> <td> contraseña: </td> <td> <input id = "contraseña" onChange = "contraseña ()" type = "contraseña"/> </td> <td align = "izquierda"> <p style = "color: #ff0000">* <input id = "bootle1" type = "value" value = "débil" style = "de fondo de fondo =" fondo de fondo: #ff00000000 ""/ #fff0000 "/ #fff0000" id = "Button2" Type = "Botton" Botton = "Medium" Style = "Background-Color: #FF0000"/> <<input id = "Button3" type = "Button" value = "strong" style = "de fondo de fondo: #ff0000"/> <etiqueta id = "lavel"> </plel> </p> </td> </tr> <tr> type = "text"/> </td> <td> <input id = "age" type = "text"/> </td> <td> <p style = "color: #ff0000">*</p> <///td> </tr> <tr> <tr> <td> género: </td> <td> <input name = "sex" type = "rio" valor = "macho" comprobado "comprobado" modificó "" name = "Sex" type = "radio" valor = "femenino"/> femenino </td> <td> align = "izquierda"> <p style = "color: #ff0000">**</p> </td> </tr> <tr> <tr> <td> contenido: </td> <td> <input type = "checkbox" name = "content" valor = "noticias" valor = "entretenimiento"/> entretenimiento <input type = "checkBox" name = "content" value = "Education"/> Entertainment </td> <td align = "izquierda"> <p style = "color: #ff0000">*</p> </td> </tr> <tr> <tr> <td> educación: </td> <td> <select name = "edu_level"> <option valor Escuela </opción> <opción value = "2"> Senior School </option> <option value = "3"> University </option> <opción value = "4"> University </option> </select> </td> <td align = "izquierda"> <p style = "color: #ff0000">*</p> </td> </tr> name = "me gusta" size = "6" múltiple = "múltiplo"> <opción valor = "1"> baloncesto </opción> <opción valor = "2"> fútbol </opción> <opción valor valor = "3"> voleibol </opción> <opción valor = "4"> running </option> <option value = "5"> Hilling </opción> <option = "6"> ajuste </spection> </select> </td> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> <input id="Button4" type="button" onclick="checkinfo()" value="View information" /></td> <td> <input type="submit" name="tijiao" value="Register" /> </td> <td> <input type="submit" name = "Tijiao" value = "Registro"/> </td> <td> <input type = "reset" name = "reset" value = "reet"/> </td> </tr> </tbody> </table> </orm>Script JS:
<script type = "text/javaScript"> function yanzheng () {var b; var a = document.getElementById ("nombre de usuario"); // Obtener valor de nombre de usuario var p = document.getElementById ("contraseña"); // Obtener valor de contraseña var a age = myForm.age.Value; // Obtener valor de edad if (a.value.length <5 || a.value.length> 10) {alert ("El nombre de usuario que ingresó es un formato incorrecto!"); devolver falso; } else if (p.value.length <5) {alert ("La longitud de la contraseña es menor que 5!"); devolver falso; } else if (! checkage (edad)) {return false; } else {return true; }} CHECKAGE DE FUNCIÓN (a) {// Verifique la edad var Ch, edad; para (var i = 0; i <a.length; i ++) {ch = a.charat (i); if (ch <"0" || ch> "9") {alerta ("¡Ingrese el número en la opción de edad!"); devolver falso; }} edad = parseInt (a); if (edad <10 || edad> 100) {alerta ("¡La edad no es verdad!"); devolver falso; } return verdadero; } function checkInfo () {// Mostrar toda la información var userName = myForm.username.Value; // Obtener la contraseña de Nombre de usuario de Nombre = myform.password.value; // Obtener contraseña var a age = myform.age.value; // Get Age Var Sex = myForm.sex; // Obtener género var oSex = ""; // Establecer una opción para obtener género var content = myform.content; // Obtener contenido var ocontent = ""; // Establecer una opción para obtener contenido var eduleave = myform.edu_level; // Obtener educación var oedu = ""; // Establecer una opción para obtener la educación var intersent = myForm.ike; // Get Form Hobby var como = ""; // Establecer una variable para obtener la opción de hobby para (var i = 0; i <sex.length; i ++) {// género if (sexo [i] .ecked) {osex = sex [i] .value; }} para (var i = 0; i <content.length; i ++) {// content if (content [i] .ecked) {ocontent += content [i] .value +""; }} para (var i = 0; i <eduleave.length; i ++) {// educativo if (eduleave.selectedIndex> = 0) {oedu = eduleave.options [eduleave.selectedIndex] .Text; }} para (var i = 0; i <intersent.length; i ++) {// pasatiempos if (intersent.options [i] .selected) {olike += intersent.options [i] .text +""; }} alert ("Su nombre de usuario es:" + nombre de usuario + "/n contraseña es:" + contraseña + "/n edad es:" + edad + "/n género es:" + ocontent + "/n educación es:" + oedu + "/n pasatiempos son:" + olike); } function PasswordLeave () {var PasswordLeAvel = myform.password.value; if (PasswordLeavel.Length == "") {document.getElementById ("Button1"). style.display = "Ninguno"; document.getElementById ("Button2"). style.display = "Ninguno"; document.getElementById ("Button3"). style.display = "Ninguno"; } else {if (PasswordLeAvel.Length <= "5") {document.getElementById ("Button1"). style.display = ""; document.getElementById ("Button2"). style.display = "Ninguno"; document.getElementById ("Button3"). style.display = "Ninguno"; } else if (PasswordLeAvel.length <= "10") {document.getElementById ("Button1"). style.display = ""; document.getElementById ("Button2"). style.display = ""; document.getElementById ("Button3"). style.display = "Ninguno"; } else {document.getElementById ("Button1"). style.display = ""; document.getElementById ("Button2"). style.display = ""; document.getElementById ("Button3"). style.display = ""; }}} function startBody () {document.getElementById ("Button1"). style.display = "Ninguno"; document.getElementById ("Button2"). style.display = "Ninguno"; document.getElementById ("Button3"). style.display = "Ninguno"; } </script>Este caso es solo algunas prácticas comunes y no involucra ninguna tecnología, pero es solo para la conveniencia de usar la próxima vez.
Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.