Вопрос: Как проверить форму сразу после ввода, вместо того, чтобы проверить ее после того, как отправили ее настолько неудобно (поиски онлайн либо неоднозначные, либо неполные ...)
Метод: Ввиду этого, Xiaoke, Shuishanqi, завершите код и добавьте личное понимание Xiaoke (обозначения). Только для лаковщиков, чтобы избежать обхода. Пожалуйста, критикуйте и исправьте все виды героев ... (обратите внимание на автора, Xiexie) - - версия формы таблицы таблицы, и в будущем будет версия JQuery ...
Если это поможет, пожалуйста, попробуйте (O) 〃ao ~
скриншот:
Код:
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <Title> Регистрация пользователя </title> <!-Стиль внешнего CSS. type = "text/javascript"> // Своевременная проверка функции имени пользователя Checkuse () {// Определение проверки переменной в каждой функции - это иметь возможность проверить, проходит ли каждая функция один за другим после отправки формы, что очень хорошо. (То же самое, что) проверка var; var username = document.getElementbyId ("имя пользователя"). if (username.length> 18 || username.length <6) {alert («Ввод имени пользователя незаконен, пожалуйста, повторно введите!»); // это очень замечательно. Поскольку вы вошли в неверное место здесь, тогда в теории, конечно, вы должны продолжать входить здесь. (Продолжайте получить фокус здесь!) Document.getElementById («Имя пользователя»). FOCUS (); check = false; } else {document.getElementbyId ("ceckText1"). innerHtml = "* Имя пользователя состоит из 6-18-битных символов √"; check = true; } return check; } // Использование регулярных выражений, чтобы определить, соответствует ли пароль function checkpwd () {var check; var reg = /[^a-za-z0-9 _]+ /; var regs = /^[a-za-z0-9_ /u4e00- /u9fa5] + $ /; var password = document.getElementById ("пароль"). Value; if (password.length <6 || password.length> 18 || regs.test (password)) {alert («Ввод пароля незаконен, пожалуйста, повторно введите!»); document.getElementbyId ("пароль"). Focus (); check = false; } else {document.getElementById ("checkText2"). innerHtml = "* Пароль состоит из 6-18 символов и должен содержать буквы, числа и знаки препинания √"; check = true; } return check; } // Проверьте, является ли пароль непоследовательным! function checkpwdc () {var check; var password = document.getElementById ("пароль"). Value; var pwdc = document.getElementByid ("pwdc"). Value; if (password! = pwdc) {alert («Пароль непоследователен при введении пароля, пожалуйста, повторно введите!»); document.getElementbyId ("pwdc"). Focus (); check = false; } else {document.getElementById ("checkText3"). innerHtml = "* Пожалуйста, введите свой пароль еще раз √"; check = true; } return check; } // Проверьте функцию категории пользователя Checkut () {var check; if (document.getElementbyId ("seluser"). selectedIndex == 0) {alert ("Пожалуйста, выберите пользователь тип!"); document.getElementbyId ("seluser"). Focus (); check = false; } else {document.getElementById ("checkText4"). innerHtml = "* Пожалуйста, выберите« Тип пользователя √ "; check = true; } return check; } // Проверьте пользовательскую гендерную функцию checkgender () {var check; var gender = ""; // Получить все теги с названием sex var sex = document.getelementsbyname ("sex"); // Передача эти теги с помощью имени Sex для (var i = 0; i <sex.length; ++ i) {// Если выбран секс, запишите if (sex [i] .cecked) gender = sex [i]. } if (gender == "") {alert ("Пожалуйста, выберите пол!"); check = false; } else {document.getElementById ("checkText5"). innerHtml = "* Пожалуйста, выберите свой пол check = true; } return check; } // Своевременно проверить дату функции рождения CheckDate () {var check; if (document.getElementbyId ("txtDate"). value == "") {alert ("Пожалуйста, заполните дату рождения!"); document.getElementById ("txtDate"). Focus (); check = false; } else {document.getElementById ("ceckText6"). innerHtml = "* Пожалуйста, выберите дату рождения √"; check = true; } return check; } // Своевременно проверить интересы и хобби функции checkhobby () {var check; var hobby = 0; // objnum - все входные теги с именем Hobby var objnum = document.getElementsbyName ("hobby"); // Передача всех хобби тегов для (var i = 0; i <objnum.length; ++ i) {// Судить, выбран ли тег хобби, если (objnum [i] .cecked == true) Hobby ++; } // Если есть выбранный тег хобби if (hobby> = 1) {document.getElementById ("ceckText7"). InnerHtml = "* Пожалуйста, выберите свое хобби √"; check = true; } else {alert ("Пожалуйста, заполните хобби!"); check = false; } return check; } // регулярное выражение проверки электронной почты (своевременное) функция CheckMail () {var check; // регулярное выражение электронной почты 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 ("e_mail ввода ошибка!"); document.getElementbyId ("email"). Focus (); check = false; } else {document.getElementById ("checkText8"). innerHtml = "* Пожалуйста, заполните обще используемое электронное письмо, которое будет использоваться для извлечения пароля √"; check = true; } return check; } // Своевременная проверка функции самостоятельного введения проверить () {var check; var intro = document.getElementById ("Введение"). Значение; if (intro.length> 100) {alert ("количество слов превышает предел!"); check = false; } else {document.getElementById ("ceckText9"). innerHtml = "* ограничено 100 словами"; document.getElementById ("checkText9"). Focus (); check = true; } return check; } // Все проверки выполняются при отправке формы (если какая -либо проверка не удается, она будет возвращена в False, чтобы предотвратить подачу формы) Function Check () {var check = ceckuse () && ceckpwd () && ceckpwdc () && ceckut () && checkgender () && checkdate () && ceckhobby () && checkmail (); вернуть чек; } </script> </head> <body> <!-<form action = "jump page" method = "get" | "post" name = "form name" target = "open с" ectype = "multipart/form-data">-> <!-onsubmit () функция подчиняется форме, когда возвращаемое значение является истинной. -> <form action = "#" method = "Get" onsubmit = "return check ()"> <fieldset> <Legend> Небольшой пример своевременной проверки формы </Legend> <таблица Align = "Left" Style = "founk-image: url ('img/4.jpg');" > <tr> <td> Имя пользователя: </td> <td> <input type = "text" name = "username" id = "username" ontchange = "ceckuse ()"/> </td> <td id = "CheckText1">* Имя пользователя состоит из 6-18 символов </td> </tr> <! Обработчик событий OnChange: запускается, когда элемент формы получает фокус, а изменяется контент-> <!-Ниже одинаково-> <Tr> <td> Пароль: </td> <td> <input type = "пароль" = "пароль" id = "password" onchange = "checkpwd ()"/> </td> <td id = "checkText2">************************* marks</td> </tr> <tr> <td>Confirm password:</td> <td><input type="password" name="pwdc" id="pwdc" onchange="checkpwdc()" /></td> <td id="checktext3">* Please enter your password again</td> </tr> <tr> <td>User type: </td> <td> <SELECT ID = "seluser" onBlur = "checkut ()"> <name name = "seluser" value = "0"> выберите </option> <name = "seluser" value = "1"> admin </option> <опция = "seluser" value = "2"> Обычный пользователь </option> </selet> </td> <td ID = "CheckText4"> wormate User> </select> </td> <td id = "CheckText4"> worke aspecte use aske upect> </select> </td> <td Id = " <tr> <td> Пол: </td> <td> <input type = "radio" value = "1" name = "sex" onchange = "checkgender ()"/> male <input type = "value =" 2 "name =" sex "onchange =" checkgender () "/> fome </td> <td id =" checktext5 ">* pleoe gender </> </td> <td id =" chectext5 ">** Pleept Your gender </> </td> <td id =" trd> </td> </td> </td> <td id = "trd> </td> </td> <td iD =" <Td> Дата рождения: </td> <td> <input type = "date" name = "date" id = "txtdate" onblur = "ceckdate ()"/> </td> <td id = "checktext6">* Пожалуйста, выберите дату рождения </td> </tr> <tr> <td> hosts: </td> <td> <td> <t hobby = "checkbobro =" checkby "hosts hosts: </td> <td> <td> <td> <T.cobbore". value = "Reading" onchange = "checkhobby ()"> чтение <input type = "fackbox" name = "hobby" value = "music" onchange = "checkhobby ()"> music <input type = "fackbox" = "hobby" value = "sports" onchange = "checkhobby ()"> sport </td> <td id = "tretext 7">* wobby () "/hobies <)"/trd obbies <) "/trd </td </td </td Id =" <ttr> <td> Электронная почта: </td> <td> <input type = "text" name = "email" id = "email" onchange = "ceckemail ()"/> </td> <td id = "checktext8">* Пожалуйста, заполните общепринятое электронное письмо, которое будет использоваться для восстановления пароля </td> </tr> <td> <td> <td> <td> <td> cols = "30" Rows = "3" name = "Введение" id = "Введение" OnChange = "CheckIntro ()"> это самостоятельное введение ... </textarea> </td> <td id = "CheckText9">* ограничено 100 словами </td> </tr> <tr> <td colspan = "2" align = "center"> </tr> <tr> <td colspan = "2" = "viep" = "into". value = "Opport"/> <input type = "reset" name = "reset" value = "reset"/> </td> </tr> </table> </fieldset> </form> </body> </html>Стиль CSS:
Ввод: фокус, Textarea: Focus {Border: 1px Solid #F00; Фон: #FCC; } textARea {width: 230px; Высота: 50px; } body {font-size: 15px; /* Стиль шрифта*/ font-family: microsoft yahei; } select option {font-size: 10px; Семейство шрифта: Microsoft Yahei; }Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.