Проверка формы JavaScript
Добавить в избранное
Важно проверить форму, отправленную пользователем, поскольку она может содержать недопустимые значения. Таким образом, проверка необходима для аутентификации пользователя.
JavaScript предоставляет возможность проверки формы на стороне клиента, поэтому обработка данных будет быстрее, чем проверка на стороне сервера. Большинство веб-разработчиков предпочитают проверку формы JavaScript.
С помощью JavaScript мы можем проверить имя, пароль, адрес электронной почты, дату, номера мобильных телефонов и другие поля.
Пример проверки формы JavaScript
В этом примере мы собираемся проверить имя и пароль. Имя не может быть пустым, а пароль не может быть короче 6 символов.
Здесь мы проверяем форму при отправке формы. Пользователь не будет перенаправлен на следующую страницу, пока заданные значения не будут правильными.
function validateform() {
let name = document.myform.name.value;
let password = document.myform.password.value;
if (name == null || name == "") {
alert("Имя не может быть пустым");
return false;
}
else if (password.length<6) {
alert("Пароль должен состоять не менее чем из 6 символов.");
return false;
}
}
</script>
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()">
Имя: <br>
<input type="text" name="name"<>br>
Пароль: <br>
<input type="password" name="password"><br>
<input type="submit" value="Регистрация">
</form>
Проверка пароля повторного ввода JavaScript
function matchpass() {
let firstpassword = document.f1.password.value;
let secondpassword = document.f1.password2.value;
if (firstpassword == secondpassword) {
return true;
}
else {
alert("пароль должен быть таким же!");
return false;
}
}
</script>
<form name="f1" action="register.jsp" onsubmit="return matchpass()">
Пароль: <br>
<input type="password" name="password"/><br>
Повторите пароль: <br>
<input type="password" name="password2"/><br>
<input type="submit">
</form>
Проверка числа JavaScript
Давайте проверим текстовое поле только для числового значения. Здесь мы используем функцию isNaN().
function validate() {
let num = document.myform.num.value;
if (isNaN(num)) {
document.querySelector("#numloc").innerHTML = "Введите только числовое значение";
return false;
}
else {
return true;
}
}
</script>
<form name="myform" onsubmit="return validate()">
Число: <br>
<input type="text" name="num"><span id="numloc"></span><br/>
<input type="submit" value="отправить">
</form>
Проверка JavaScript с изображением
Давайте посмотрим пример интерактивной проверки формы JavaScript, который отображает правильное и неправильное изображение, если ввод правильный или неправильный.
function validate() {
let name = document.f1.name.value;
let password = document.f1.password.value;
let status = false;
if (name.length < 1) {
document.querySelector("#nameloc").innerHTML = " <img src='unchecked.gif'/> Пожалуйста, введите Ваше имя";
status = false;
}
else {
document.querySelector("#nameloc").innerHTML = " <img src='checked.gif'/>";
status = true;
}
if (password.length < 6) {
document.querySelector("#passwordloc").innerHTML = " <img src='unchecked.gif'/> Пароль должен быть не менее 6 символов.";
status = false;
}
else {
document.querySelector("#passwordloc").innerHTML = " <img src='checked.gif'/>";
}
return status;
}
</script>
<form name="f1" action="#" onsubmit="return validate()">
<table>
<tr><td>Введите имя:</td><td><input type="text" name="name"/>
<span id="nameloc"></span></td></tr>
<tr><td>Введите пароль:</td><td><input type="password" name="password"/>
<span id="passwordloc"></span></td></tr>
<tr><td colspan="2"><input type="submit" value="Регистрация"/></td></tr>
</table>
</form>
Проверка электронной почты JavaScript
Мы можем проверить электронную почту с помощью JavaScript.
Существует множество критериев, которым необходимо следовать для проверки идентификатора электронной почты, например:
◦ идентификатор электронной почты должен содержать @ и .
◦ До и после @ должен быть хотя бы один символ.
◦ После . должно быть не менее двух символов. (точка).
Давайте посмотрим на простой пример проверки поля электронной почты.
function validateemail() {
let x = document.myform.email.value;
let atposition = x.indexOf("@");
let dotposition = x.lastIndexOf(".");
if (atposition < 1 || dotposition < atposition + 2 || dotposition + 2 >= x.length) {
alert("Пожалуйста, введите действующий адрес электронной почты в поле:" + atposition + "\n dotposition:" + dotposition);
return false;
}
}
</script>
<form name="myform" method="post" action="#" onsubmit="return validateemail();">
Email: <br>
<input type="text" name="email"><br>
<input type="submit" value="регистрация">
</form>