Эта статья разделяет общие методы JavaScript для обработки событий формы для вашей ссылки. Конкретный контент заключается в следующем
1. Общие методы для доступа к объектам формы:
①: в соответствии с атрибутом ID элемента <Form>;
var myform = document.getElementById ("myformid"); // myformid - это идентификатор элемента <form>;
②: в соответствии с атрибутом имени элемента <Form>;
var myform = document.forms ["myformname"]; // MyFormName - это имя элемента <form>;
③: Используйте имя формы непосредственно для доступа к форме:
var myform = document.myformname; // MyFormName - это имя элемента <form>;
2. Общие события для форм:
① Событие Onsubmit: это событие будет запускается при нажатии кнопки «Отправить» и может предотвратить подачу формы. Пример: проверка форм;
Event событие: это событие запускается, когда пользователь меняет контент, а текстовое поле теряет фокус;
Пример: подчинение формы
Интерфейс стойки регистрации:
Код интерфейса переднего плана:
<form name = "myform" action = "javascript: alert ('зарегистрирован успешно!');" method = "post" onsubmit = "return yanzheng ();"> <table> <tbody> <tr> <td> username: </td> <td> <input name = "username" id = "username" type = "text"/> </td> <td Align = "Left"> <p style = ": #ff0000">*userma ulin </td> </tr> <tr> <td> пароль: </td> <td> <input id = "пароль" onchange = "passwordLeave ()" type = "пароль"/> </td> <td align = "left"> <p style = "color: #ff0000">* <input id = "type =" valu id = "button2" type = "button" value = "medium" style = "founal-color: #ff0000"/> <input id = "button3" type = "button" value = "strong" style = "foanle-color: #ff0000"/> <label id = "lavel"> </label> </p> </td> </tr> <td> <td> Age: </label> </p> </td> </tr> <td> <td> <td> </td> <td> <td> <td> <td> <td> </td> <td> <td> </tr> type = "text"/> </td> <td> <input id = "age" type = "text"/> </td> <td> <p style = "color: #ff0000">*</p> </td> </tr> <tr> <td> Пол: </td> <td> <Input = "sex" type = " name = "sex" type = "radio" value = "kene"/> wem </td> <td> align = "слева"> <p style = "color: #ff0000">*</p> </td> </tr> <tr> <td> Содержание: </td> <td> <input type = "name = news =" value = "value =" news "/> news" news = "news =" news = "news =" news "/" "intopbox =" news = " value = "Entertainment"/> Entertainment <Input Type = "fackbox" name = "content" value = "Education"/> Entertainment </td> <td align = "Left"> <p style = "color: #ff0000">*</p> </td> </tr> <tr> <td> Образование: </td> <td> <seop name = "edu_lelel" <td>. School</option> <option value="2">Senior School</option> <option value="3">University</option> <option value="4">University</option> </select> </td> <td align="left"> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> Hobbies: </td> <td> <select name="like" size="6" multiple="multiple" > <option value="1">Basketball</option> <option value="2">Football</option> <option value="3">Volleyball</option> <option value="4">Running</option> <option value="5">Hilling</option> <option value="6">Fitness</option> </select> </td> <td align="left"> <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 = "Register"/> </td> <td> <input type = "reset" name = "reset" value = "reset"/> </td> </tr> </tbody> </table> </form>Сценарий JS:
<script type = "text/javascript"> function yanzheng () {var b; var a = document.getElementbyId ("имя пользователя"); // Получить значение имени пользователя var p = document.getElementById ("пароль"); // Получить значение пароля var age = myform.age.value; // Получить значение возраста if (a.value.length <5 || a.value.length> 10) {alert («Имя пользователя, в котором вы ввели неверный формат!»); вернуть ложь; } else if (p.value.length <5) {alert («Длина пароля меньше 5!»); вернуть ложь; } else if (! checkage (age)) {return false; } else {return true; }} проверка функции (a) {// Проверка возраста var ch, age; for (var i = 0; i <a.length; i ++) {ch = a.charat (i); if (CH <"0" || CH> "9") {alert ("Пожалуйста, введите номер в опцию возраста!"); вернуть ложь; }} age = parseint (a); if (возраст <10 || возраст> 100) {alert («Возраст неправда!»); вернуть ложь; } вернуть true; } function chestinfo () {// Показать всю информацию var username = myform.username.value; // Получить имя пользователя var password = myform.password.value; // Получить пароль var age = myform.age.value; // получить возраст var sex = myform.sex; // Получить пол var osex = ""; // Установите опцию для получения гендерного var content = myform.content; // Получить контент var ocontent = ""; // Установите опцию, чтобы получить контент var eduleave = myform.edu_level; // получить образование var oedu = ""; // Установите опцию, чтобы получить образование var intersent = myform.like; // Получить форму хобби var like = ""; // Установить переменную, чтобы получить опцию Hobby для (var i = 0; i <sex.length; i ++) {// Пол if (sex [i] .cecked) {osex = sex [i] .value; }} for (var i = 0; i <content.length; i ++) {// content if (content [i] .cecked) {ocontent += content [i] .value +""; }} for (var i = 0; i <eduleave.length; i ++) {// Образование if (eduleave.selectedIndex> = 0) {oedu = eduleave.options [eduleave.selectedIndex] .Text; }} for (var i = 0; i <intersent.length; i ++) {// hobbies if (intersent.options [i]. Selection) {olike += intersent.options [i] .text +""; }} alert («Ваше имя пользователя:» + username + »/n пароль:« + пароль + »/n возраст:« + возраст + »/n Пол:« + ocontent + »/n Образование:« + oedu + »/n Hobbies:« + olike); } function passwordLeave () {var passwordLeavel = myform.password.value; if (passwordleavel.length == "") {document.getElementById ("button1"). style.display = "none"; document.getElementbyId ("button2"). style.display = "none"; document.getElementbyId ("button3"). style.display = "none"; } else {if (passwordLeavel.length <= "5") {document.getElementById ("button1"). style.display = ""; document.getElementbyId ("button2"). style.display = "none"; document.getElementbyId ("button3"). style.display = "none"; } else if (passwordLeavel.length <= "10") {document.getElementById ("button1"). style.display = ""; document.getElementbyId ("button2"). style.display = ""; document.getElementbyId ("button3"). style.display = "none"; } else {document.getElementById ("button1"). style.display = ""; document.getElementbyId ("button2"). style.display = ""; document.getElementbyId ("button3"). style.display = ""; }}} function startBody () {document.getElementById ("button1"). style.display = "none"; document.getElementbyId ("button2"). style.display = "none"; document.getElementbyId ("button3"). style.display = "none"; } </script>Этот случай является лишь несколькими общими практиками и не включает в себя какую -либо технологию, но только для удобства использования в следующий раз.
Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.