В этой статье описывается метод JS для проверки формы. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
1. Традиционный код проверки формы
Скопируйте код следующим образом: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> проверка формы </title>
<script type = "text/javascript">
Функция $ (id) {
return document.getElementbyId (id);
}
функция проверка () {
var email = $ ("email"). Value;
var password = $ ("пароль"). Value;
var repassword = $ ("repassword"). Value;
var name = $ ("name"). value;
if (email == "") {
Alert («значение электронной почты не может быть пустым»);
$ ("электронная почта"). Focus ();
вернуть ложь;
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
Alert («Формат почтового ящика неверен, должен включать @ и.»);
$ ("электронная почта"). Focus ();
вернуть ложь;
}
if (password == "") {
оповещение («пароль не может быть пустым»);
$ ("пароль"). Focus ();
вернуть ложь;
}
if (password.length <6) {
оповещение («длина пароля должна быть больше или равна 6»);
$ ("пароль"). Focus ();
вернуть ложь;
}
if (repassword! = пароль) {
Alert («Введенный пароль дважды непоследователен»);
$ ("repassword"). Focus ();
вернуть ложь;
}
if (name == "") {
оповещение («Имя не может быть пустым»);
$ ("имя"). Focus ();
вернуть ложь;
}
for (var i = 0; i <name.length; i ++) {
var J = name.substring (i, i+1);
if (isnan (j) == false) {
Alert («Имя не может содержать числа»);
$ ("имя"). Focus ();
вернуть ложь;
}
}
}
</script>
</head>
<тело>
<form name = "login_form" method = "post" onsubmit = "return check ()">
<div>
Электронная почта: <input type = "text" name = "email" id = "email"/>
</div>
<div>
Пароль: <input type = "password" name = "password" id = "пароль" />
</div>
<div>
Повторно введите пароль: <input type = "password" name = "repassword" id = "repassword" />
</div>
<div>
Имя: <input type = "text" name = "name" id = "name" />
</div>
<div>
<input type = "отправить" value = "Register" />
</div>
</form>
</body>
</html>
2. Проверка формы с помощью краткой информации за поле ввода
Скопируйте код следующим образом: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> проверка формы </title>
<script type = "text/javascript">
Функция $ (id) {
return document.getElementbyId (id);
}
функция проверка () {
var email = $ ("email"). Value;
var password = $ ("пароль"). Value;
var repassword = $ ("repassword"). Value;
var name = $ ("name"). value;
$ ("emailInfo"). innerHtml = "";
$ ("passwordInfo"). innerHtml = "";
$ ("repasswordfo"). innerhtml = "";
$ ("nameinfo"). innerhtml = "";
if (email == "") {
$ ("emailInfo"). innerHtml = "Значение электронной почты не может быть пустым";
$ ("электронная почта"). Focus ();
вернуть ложь;
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
$ ("emailInfo"). innerHtml = "Формат почтового ящика неверен, должен включать @ и.";
$ ("электронная почта"). Focus ();
вернуть ложь;
}
if (password == "") {
$ ("passwordInfo"). innerHtml = "Пароль не может быть пустым";
$ ("пароль"). Focus ();
вернуть ложь;
}
if (password.length <6) {
$ ("passwordInfo"). innerHtml = "Длина пароля должна быть больше или равна 6";
$ ("пароль"). Focus ();
вернуть ложь;
}
if (repassword! = пароль) {
$ ("repasswordfo"). innerhtml = "Пароль, введенный дважды, непоследователен";
$ ("repassword"). Focus ();
вернуть ложь;
}
if (name == "") {
$ ("nameInfo"). innerHtml = "Имя не может быть пустым";
$ ("имя"). Focus ();
вернуть ложь;
}
for (var i = 0; i <name.length; i ++) {
var J = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("nameInfo"). innerHtml = 'Имя не может содержать числа';
$ ("имя"). Focus ();
вернуть ложь;
}
}
}
</script>
</head>
<тело>
<form name = "login_form" method = "post" onsubmit = "return check ()">
<div>
Электронная почта: <input type = "text" name = "email" id = "email"/> <span id = "emailInfo"> </span>
</div>
<div>
Пароль: <input type = "password" name = "password" id = "пароль" /> <span id = "passwordInfo"> < /span>
</div>
<div>
Повторно введите пароль: <input type = "password" name = "repassword" id = "repassword" /> <span id = "repasswordfo"> < /span>
</div>
<div>
Имя: <input type = "text" name = "name" id = "name" /> <span id = "nameinfo"> < /span>
</div>
<div>
<input type = "отправить" value = "Register" />
</div>
</form>
</body>
</html>
Рендеринги следующие:
3. Запустите функцию проверки, когда входная окно теряет фокус
Скопируйте код следующим образом: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> проверка формы </title>
<script type = "text/javascript">
Функция $ (id) {
return document.getElementbyId (id);
}
функция проверка () {
var email = $ ("email"). Value;
var password = $ ("пароль"). Value;
var repassword = $ ("repassword"). Value;
var name = $ ("name"). value;
$ ("emailInfo"). innerHtml = "";
$ ("passwordInfo"). innerHtml = "";
$ ("repasswordfo"). innerhtml = "";
$ ("nameinfo"). innerhtml = "";
if (email == "") {
$ ("emailInfo"). innerHtml = "Значение электронной почты не может быть пустым";
вернуть ложь;
}
if (email.indexof ("@") == -1 || email.indexof (".") == -1) {
$ ("emailInfo"). innerHtml = "Формат почтового ящика неверен, должен включать @ и.";
вернуть ложь;
}
if (password == "") {
$ ("passwordInfo"). innerHtml = "Пароль не может быть пустым";
вернуть ложь;
}
if (password.length <6) {
$ ("passwordInfo"). innerHtml = "Длина пароля должна быть больше или равна 6";
вернуть ложь;
}
if (repassword! = пароль) {
$ ("repasswordfo"). innerhtml = "Пароль, введенный дважды, непоследователен";
вернуть ложь;
}
if (name == "") {
$ ("nameInfo"). innerHtml = "Имя не может быть пустым";
вернуть ложь;
}
for (var i = 0; i <name.length; i ++) {
var J = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("nameInfo"). innerHtml = 'Имя не может содержать числа';
вернуть ложь;
}
}
}
Function checkEmail () {// Проверить электронную почту
$ ('emailinfo'). innerhtml = "";
var email = $ ('email'). Value;
if (email == "") {
$ ('emailInfo'). innerHtml = "Значение электронной почты не может быть пустым";
вернуть ложь;
}
if (email.indexof ('@') == -1 || email.indexof ('.') == -1) {
$ ('emailInfo'). innerHtml = "Электронная почта должна содержать @ и.";
вернуть ложь;
}
}
Функция CheckPassword () {// Проверка пароля
$ ('passwordInfo'). innerHtml = "";
var password = $ ('пароль'). value;
if (password == "") {
$ ("passwordInfo"). innerHtml = "Пароль не может быть пустым";
вернуть ложь;
}
if (password.length <6) {
$ ("passwordInfo"). innerHtml = "Длина пароля должна быть больше или равна 6";
вернуть ложь;
}
}
Function CheckRepassWord () {// Проверьте повторный пароль
$ ('repassword'). innerhtml = "";
var repassword = $ ('repassword'). Value;
if (repassword! = пароль) {
$ ("repasswordfo"). innerhtml = "Пароль, введенный дважды, непоследователен";
вернуть ложь;
}
}
Function CheckName () {// Проверьте имя
$ ('nameinfo'). innerhtml = "";
var name = $ ('name'). value;
if (name == "") {
$ ("nameInfo"). innerHtml = "Имя не может быть пустым";
вернуть ложь;
}
for (var i = 0; i <name.length; i ++) {
var J = name.substring (i, i+1);
if (isnan (j) == false) {
$ ("nameInfo"). innerHtml = 'Имя не может содержать числа';
вернуть ложь;
}
}
}
</script>
</head>
<тело>
<form name = "login_form" method = "post" onsubmit = "return check ()">
<div>
Электронная почта: <input type = "text" name = "email" id = "email" onblur = "checkemail ();"/> <span id = "emailInfo"> </span>
</div>
<div>
Пароль: <input type = "password" name = "password" id = "password" onblur = "checkpassword ();"/> <span id = "passwordInfo"> </span>
</div>
<div>
Повторно введите пароль: <input type = "password" name = "repassword" id = "repassword" onblur = "CheckRepassword ();"/> <span id = "repasswordfo"> </span>
</div>
<div>
Имя: <input type = "text" name = "name" id = "name" onblur = "checkname ();"/> <span id = "nameinfo"> </span>
</div>
<div>
<input type = "отправить" value = "Register" />
</div>
</form>
</body>
</html>
Рендеринги следующие:
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.