JavaScript: HTML Form - проверка на цифры и буквы

Последнее обновление 22 мая 2019 09:52:45 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Проверка на цифры и буквы

Иногда возникают ситуации (например, идентификатор пользователя, пароль или код), когда пользователь должен заполнить одно или несколько полей алфавитными символами (AZ или az) и числами (0-9) в форме HTML. Вы можете написать скрипт проверки формы JavaScript, чтобы проверить, содержат ли обязательные поля в форме HTML только буквы и цифры.

Посмотрите видеоурок по проверке формы JavaScript.

Функция Javascript для проверки наличия в поле ввода букв и цифр

// Function to check letters and numbers
function alphanumeric(inputtxt)
{
 var letterNumber = /^[0-9a-zA-Z]+$/;
 if((inputtxt.value.match(letterNumber)) 
  {
   return true;
  }
else
  { 
   alert("message"); 
   return false; 
  }
  }

Чтобы получить строку, содержащую только буквы и цифры (т. Е. Az, AZ или 0-9), мы используем регулярное выражение / ^ [0-9a-zA-Z] + $ /, которое допускает только буквы и цифры. Затем метод match () строкового объекта используется для сопоставления указанного регулярного выражения с входным значением. Вот полный веб-документ. +

Блок - схема:

HTML-код

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - checking all letters and numbers</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Enter your Registration Number and Submit</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter numbers and alphabets only.</li>
<li>&nbsp;</li>
<li><input type="submit" name="submit" value="Submit" onclick="alphanumeric(document.form1.text1)" /></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="check-letters-numbers.js"></script>
</body>
</html>

Javascript код

function alphanumeric(inputtxt)
{ 
var letters = /^[0-9a-zA-Z]+$/;
if(inputtxt.value.match(letters))
{
alert('Your registration number have accepted : you can try another');
document.form1.text1.focus();
return true;
}
else
{
alert('Please input alphanumeric characters only');
return false;
}
}

CSS код

li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}

Посмотреть пример в браузере

Практикуйте пример онлайн

См. Pen letters-numbers-field-1 от w3resource ( @ w3resource ) в CodePen .

Загрузите код проверки отсюда.

Другая проверка JavaScript:

Предыдущая: JavaScript: проверка формы HTML - проверка чисел с плавающей точкой
Далее: JavaScript: HTML Form - ограничение длины