Проверка формы в JavaScript - httpdoc.ru

Проверка формы JavaScript

Проверка формы JavaScript означает, что данные, введенные в форму, должны быть подходящими и аутентичными. Это процесс проверки и проверки данных в полях ввода.

Проверка Javascript - это client side проверка, т. Е. Данные проверяются на компьютере клиента и не отправляются на сервер, если данные неуместны. Это быстрее, чем проверка на стороне сервера.


Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript Form Validation </title> 
<script>
 function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  var password=document.forms["myForm"]["password"].value;
  if (x == "") {
   alert("Name must be filled out");
   return false;
   }
   else if(password.length<6){  
   alert("Password must be at least 6 characters long.");  
   return false;  
   }  
 }
</script>
</head>
<body>

<form name="myForm" action="../index.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname"> Password: <input type="password" name="password">
<input type="submit" value="Submit">
</form>

</body>
</html>

Выход

JavaScript Form Password Validation
Имя: Пароль:

Проверка пароля JavaScript

В приведенном ниже примере пользователю необходимо дважды ввести один и тот же пароль. После отправки формы пароли будут проверены на соответствие, если оба пароля совпадают, тогда все в порядке, в противном случае пользователю придется вводить пароли еще раз, чтобы соответствовать.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript Form Password Validation </title> 
<script>  
 function matchpass(){  
 var firstpassword=document.form_password.password.value;  
 var secondpassword=document.form_password.password2.value;  
  
 if(firstpassword==secondpassword){  
 return true;  
 }  
 else{  
 alert("password must be same!");  
 return false;  
 }  
 }  
</script>  
  
 <form name="form_password" action="../index.php" onsubmit="return matchpass()">  
  Password:<input type="password" name="password" /><br/>  
  Re-enter Password:<input type="password" name="password2"/><br/>  
<input type="submit">  
</form>  

</body>
</html>

Выход

JavaScript Form Password Validation
Пароль : Повторно введите пароль :

Проверка номера JavaScript

В приведенном ниже примере пользователь может вводить только цифры в поле ввода. Если пользователь вводит что-то отличное от цифр, например алфавиты, символы и т. Д., Будет выдано сообщение об ошибке.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript Form Number Validation </title> 
<body>
<h2>JavaScript Can Validate Input</h2>
<p>Please input a number between 1 and 10:</p>

<input id="number">

<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>

<script>
 function myFunction() {
  var x, text;
  // Get the value of the input field with id="numb"
  x = document.getElementById("number").value;

  // If x is Not a Number or less than one or greater than 10
  if (isNaN(x) || x < 1 || x > 10) {
   text = "Input not valid";
   } else {
   text = "Input OK";
   }
 document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Выход

JavaScript Form Number Validation

Введите число от 1 до 10:


Проверка электронной почты JavaScript

В приведенном ниже примере введенный адрес электронной почты будет проверен на проверку. Будет проверяться правильность синтаксиса электронного письма.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title> JavaScript Form Number Validation </title> 
 <script>
  function validateForm() {
   var x = document.forms["myForm"]["email"].value;
   var atpos = x.indexOf("@");
   var dotpos = x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
   alert("Enter valid e-mail address");
   return false;
  }
 }
</script>
</head>

<body>
<form name="myForm" action="../index.php" onsubmit="return validateForm();" method="post">
  Email: <input type="text" name="email"> 
  <input type="submit" value="Submit">
</form>

</body>
</html>

Выход

JavaScript Form Number Validation
Эл. адрес: